/* =================================================================== JAPHONE — design tokens =================================================================== */ :root { --ink: #050506; --panel: #0B0E14; --panel-2: #12161F; --line: rgba(255,255,255,0.10); --line-soft: rgba(255,255,255,0.06); /* Shades of white, not shades of blue. The old pair sat at 92.7% and 95.1% lightness with ~30% saturation, and at that darkness the blue cast became visible — the section change read as "white to light blue" rather than as one surface stepping to another. These are the same relationship (a ~2 point step) moved up near white, so the step reads as tone, not hue. --paper is the sunken/alternating section; --paper-2 is the canvas. */ --paper: #F3F4F8; --paper-2: #FAFBFC; /* A third, deeper step so sections have more than two tones to work with. The rule that keeps it grey instead of blue: saturation drops as lightness drops. The old blue --paper held ~30% saturation at 92.7% lightness; this is DARKER at 93.5% but only 15% saturation, so it reads as a deeper white rather than a blue tint. */ --paper-3: #ECEDF1; /* The two shadow colours every raised and recessed surface is built from. */ --soft-dark: rgba(163,177,198,0.55); --soft-light: rgba(255,255,255,0.95); --text-hi: #F5F6F8; --text-lo: #8B93A7; --text-dark: #0B0E14; /* Darkened with the ground. #5B6472 cleared 4.5:1 against white; against the softer #EEF1F7 it fell to 3.84 and stopped being readable body text. */ --text-dark-lo: #4E5766; /* Ink as raw channels, so themed surfaces can invert every hairline border, hover tint and divider that was authored as "ink at N% alpha". */ --ink-rgb: 11,14,20; /* The ticker is a normal-flow bar at the very top; the nav is fixed. Both numbers live here so the nav can be parked clear of the bar instead of under it, and js/main.js does not have to hard-code the offset. */ --ticker-h: 32px; --nav-top: calc(var(--ticker-h) + 14px); --blue: #2F6FFF; /* White on --blue measures 4.34:1, just under the 4.5:1 AA floor, and button labels here are 13.6px/600 so the normal-text threshold applies. This is the same blue a shade down (4.93:1) and is used ONLY where white text sits on a blue fill. Borders, links, focus rings and accents keep --blue. */ --blue-cta: #2A66F0; --blue-bright: #6E9BFF; --blue-soft: rgba(47,111,255,0.14); /* --blue is 3.8:1 on the soft ground, which is under the 4.5 small text needs. Fills keep --blue; anything you have to READ takes this. */ --blue-ink: #1D4FD8; --amber: #FFD166; /* Yellow is light; use this for accent TEXT on light surfaces. Darkened from #9A7500, which measured 3.77:1 on the light card and failed WCAG AA for the small labels and notes using it. This is 4.53:1 there and 5.12:1 on white. The hero's big accent word passed either way at its size. */ --amber-deep: #7E5F00; --amber-soft: rgba(255,209,102,0.14); --green: #34D399; /* #34D399 is a light mint — fine on the dark sections, but only 1.9:1 on a white card, which is unreadable at small sizes. Use this for green TEXT on light surfaces, the same way --amber-deep exists for yellow. */ --green-deep: #047857; --font-display: 'Space Grotesk', sans-serif; --font-body: 'Plus Jakarta Sans', sans-serif; --container: 1240px; --ease: cubic-bezier(0.16, 1, 0.3, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* The ambient card elevation. Same glass anatomy as --lift-*, one step softer, since this is what most panels and cards sit on. */ --shadow-soft: 0 1px 2px rgba(19,22,30,0.04), 0 8px 24px -10px rgba(31,38,135,0.12); --shadow-glass: 0 30px 80px -20px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.06); /* ---------------------------------------------------------------- soft UI One scale of radii and one of elevations, so a button, a card, an input and a panel are all obviously the same family. Everything below is expressed against these rather than hand-rolled per component, which is how the site drifted into five different shadows in the first place. The elevations are two-part: a cool shadow below and a white highlight above, which is what makes a surface look lifted off the page rather than stuck on with a drop shadow. */ --r-xs: 10px; --r-sm: 14px; --r-md: 18px; --r-lg: 24px; --r-xl: 32px; --r-pill: 999px; /* ---- spacing scale ---- Seeded from this file's own most-common gap/padding/margin values — the real rhythm here runs in ~2px steps, not an imported 8px grid. */ --space-1: 2px; --space-2: 4px; --space-3: 6px; --space-4: 8px; --space-5: 10px; --space-6: 12px; --space-7: 14px; --space-8: 16px; --space-9: 18px; --space-10: 20px; --space-11: 22px; --space-12: 24px; --space-13: 26px; --space-14: 28px; --space-15: 32px; --space-16: 40px; /* ---- type scale ---- Named from this file's own most-common font-size values. Numbered rather than xs/sm/md/lg — too many close, real steps for t-shirt sizes to stay meaningful. */ --fs-1: 0.66rem; --fs-2: 0.68rem; --fs-3: 0.7rem; --fs-4: 0.72rem; --fs-5: 0.78rem; --fs-6: 0.8rem; --fs-7: 0.82rem; --fs-8: 0.85rem; --fs-9: 0.86rem; --fs-10: 0.88rem; --fs-11: 0.9rem; --fs-12: 0.92rem; --fs-13: 0.95rem; --fs-14: 1.02rem; /* ---------------------------------------------------------------- glass Liquid Glass, replacing the soft-UI elevations. Neumorphism made depth out of a light and a dark shadow on an opaque surface; glass makes it out of a translucent pane with light caught on its edges. Four parts, the same four the wizard's glass already uses: 1. a frosted, translucent fill, so the section tone shows through 2. a specular line along the top edge, where the light lands 3. a chromatic split at the rim, cool on one side and warm on the other, standing in for what a real refraction shader would do 4. a soft cast shadow, so it still sits ABOVE the page The lift/press names are kept deliberately: 57 selectors already reference them, so redefining them here converts the whole site at once instead of touching every rule. */ /* Glassmorphism, not Liquid Glass. The difference that matters: Liquid Glass is thin and very see-through, which is fine for a control floating over a photo but goofy over a page of text — content behind stays legible and collides with the content in front. Glassmorphism leans on the BLUR instead, at an opacity high enough that whatever is behind becomes an unreadable wash. So: heavier fill, heavier blur, one soft border, one soft shadow, and none of the specular / chromatic-rim / gloss ornamentation. */ /* Two things make this read as glass rather than a tinted box: 1. a heavy blur — heavy enough that text behind becomes an unreadable wash. This, not opacity, is what stops bleed-through, which means the pane can stay genuinely translucent. 2. a bright rim, crisp all the way around. It is the single most recognisable part of the look; without it a translucent panel just reads as a lighter rectangle. A hairline ring is paired with the rim on light surfaces, because a white border on a near-white card is invisible on its own. */ /* Tinted rather than pure white, and a touch more solid. The sections underneath are near-neutral, so a whisper of the brand hue in the pane is what makes it read as coloured glass instead of frosted plastic. Kept faint on purpose — much past this and it stops being glass and starts being a blue card. */ /* Near-clear, and that is the whole point. At 0.74 this was a white sheet with a stroke on it — a card, not glass. Glass is only visible by what it does to what is behind it, so the paint gets out of the way and the blur carries legibility instead. Two layers: a broad diagonal specular sweep, and a faint body tint under it. */ --glass-sheen: linear-gradient(118deg, transparent 26%, rgba(255,255,255,0.08) 38%, rgba(255,255,255,0.02) 47%, transparent 60%); --glass-body: linear-gradient(160deg, rgba(255,255,255,0.07), rgba(255,255,255,0.01)); /* The thickness. A pane of real glass shows its near surface catching light along the top, its far surface as a caustic along the bottom, and a slight densening of the body just inside the rim. */ --glass-bevel: inset 0 1px 0 0 rgba(255,255,255,0.48), inset 0 -1.5px 2px -1px rgba(255,255,255,0.30), inset 0 0 16px -10px rgba(19,22,30,0.20); --glass-fill-2: rgba(246,249,255,0.90); /* menus and overlays stay opaque */ --glass-border: rgba(255,255,255,0.9); /* The rim, as a sweep rather than a value. 0deg is the top of the pane and the angle runs clockwise: white across the top from a light in the upper left, thinning through the right side, tipping into a faint dark along the lower right — which is what holds the pane's boundary there now that no hairline does — then back up through the left. First and last stops match, so the sweep closes without a seam. */ --glass-lens: conic-gradient(from 0deg at 50% 50%, rgba(255,255,255,0.40) 0deg, rgba(255,209,102,0.12) 42deg, /* amber fringe */ rgba(255,255,255,0.07) 92deg, rgba(19,22,30,0.07) 150deg, rgba(19,22,30,0.09) 200deg, rgba(47,111,255,0.09) 248deg, /* blue fringe */ rgba(255,255,255,0.22) 300deg, rgba(255,255,255,0.40) 360deg); /* Was 0 0 0 1px — a hard hairline all the way round, which is a drawn outline, not an edge. The rim sweep above does that job now; this is just what seats the pane on the page. */ --glass-ring: 0 1px 3px rgba(19,22,30,0.07); /* Saturation well above 100% so colour passing under the pane comes through vivid rather than washed — the single thing that separates glass from frosted plastic. */ --glass-blur: blur(16px) saturate(185%); /* The rim band's own filter. Saturation pushed hard so the edge takes its colour from whatever is behind it, the way a real lens edge goes pink over red and teal over teal. Over a neutral ground it resolves to neutral and the conic carries the edge alone. A token because dark grounds need it far lower: 420% of a navy page is a vivid blue ring that reads as a focus state. */ --glass-rim-filter: blur(2px) brightness(1.22) saturate(420%); --lift-1: 0 1px 2px rgba(19,22,30,0.04), 0 4px 14px -6px rgba(31,38,135,0.10); --lift-2: 0 2px 4px rgba(19,22,30,0.04), 0 10px 28px -10px rgba(31,38,135,0.14); --lift-3: 0 4px 8px rgba(19,22,30,0.05), 0 22px 52px -16px rgba(31,38,135,0.20); /* Recessed glass: the pane sits BELOW the surface, so the specular moves to the inside of the top edge and the tint darkens rather than lifts. */ --press-1: inset 0 1px 3px rgba(19,22,30,0.10), inset 0 -1px 0 rgba(255,255,255,0.7); --press-2: inset 0 2px 6px rgba(19,22,30,0.14), inset 0 -1px 0 rgba(255,255,255,0.6); /* Soft UI carries no outlines; edges come from the light. Kept as a token so the few places that genuinely need a line still have one to reach for. */ --hairline: 1px solid rgba(163,177,198,0.22); --focus-ring: 0 0 0 3px rgba(47,111,255,0.22); /* Universal icons rather than typographic characters or emoji: these render identically on every platform and inherit currentColor through a mask. */ --icon-arrow-ne: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M9 7h8v8'/%3E%3C/svg%3E"); --icon-arrow-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E"); --icon-arrow-left: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5M11 18l-6-6 6-6'/%3E%3C/svg%3E"); --icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); } * { box-sizing: border-box; margin: 0; padding: 0; } body { background: var(--paper-2); color: var(--text-dark); font-family: var(--font-body); line-height: 1.5; -webkit-font-smoothing: antialiased; overflow-x: hidden; position: relative; } body::before { content: ''; position: fixed; inset: 0; z-index: 999; pointer-events: none; opacity: 0.025; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } img, svg { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font: inherit; background: none; border: none; cursor: pointer; color: inherit; } ul { list-style: none; } input, textarea, select { font: inherit; } .section-eyebrow { display: inline-flex; align-items: center; font-family: var(--font-display); font-size: var(--fs-2); font-weight: 600; letter-spacing: 0.16em; color: var(--blue); padding: 7px var(--space-8); border-radius: var(--r-pill); border: 1px solid rgba(47,111,255,0.22); background: rgba(47,111,255,0.07); margin-bottom: var(--space-9); } .section-eyebrow--center { margin-left: auto; margin-right: auto; } /* =================================================================== BUTTONS =================================================================== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-4); padding: 15px var(--space-12); border-radius: var(--r-pill); font-family: var(--font-display); font-weight: 600; font-size: var(--fs-8); letter-spacing: 0.02em; transition: transform 0.28s var(--ease-spring), background 0.28s var(--ease), color 0.28s var(--ease), border-color 0.28s var(--ease), box-shadow 0.28s var(--ease); white-space: nowrap; position: relative; -webkit-tap-highlight-color: transparent; } .btn:focus-visible { outline: none; box-shadow: var(--focus-ring); } .btn--solid, .btn--outline { padding-right: 54px; } /* The arrow was the character U+2197, which every platform draws differently and some draw as a colour emoji. A masked SVG is the same glyph everywhere and takes currentColor, so it tracks the button's own text. */ .btn--solid::after, .btn--outline::after { content: ''; position: absolute; right: 6px; top: 50%; width: 32px; height: 32px; border-radius: 50%; transform: translateY(-50%); background-color: currentColor; transition: transform 0.28s var(--ease-spring), opacity 0.28s var(--ease); } /* Two layers on one pseudo-element: the disc is a background-color, the arrow is punched out of it by a mask, so this needs a separate element for the glyph. ::before carries the arrow, ::after the disc behind it. */ .btn--solid::before, .btn--outline::before { content: ''; position: absolute; right: 6px; top: 50%; width: 32px; height: 32px; transform: translateY(-50%); z-index: 1; background-color: currentColor; -webkit-mask: var(--icon-arrow-ne) center / 13px 13px no-repeat; mask: var(--icon-arrow-ne) center / 13px 13px no-repeat; transition: transform 0.28s var(--ease-spring); } .btn--solid { background: var(--blue-cta); color: #fff; box-shadow: 0 1px 2px rgba(47,111,255,0.24), 0 10px 24px -10px rgba(47,111,255,0.55), inset 0 1px 0 rgba(255,255,255,0.25); } .btn--solid::after { background-color: rgba(255,255,255,0.20); } .btn--solid:hover { transform: translateY(-2px); background: var(--blue-bright); box-shadow: 0 2px 4px rgba(47,111,255,0.24), 0 16px 32px -12px rgba(47,111,255,0.6), inset 0 1px 0 rgba(255,255,255,0.3); } .btn--solid:hover::before { transform: translateY(-50%) translate(2px,-2px); } .btn--solid:active { transform: translateY(0) scale(0.985); box-shadow: inset 0 2px 6px rgba(12,40,110,0.35); } .btn--outline { border: 1px solid rgba(255,255,255,0.22); color: inherit; } .btn--outline::after { background-color: rgba(255,255,255,0.08); } .btn--outline:hover { transform: translateY(-2px); border-color: var(--blue); color: var(--blue-bright); } .btn--outline:hover::before { transform: translateY(-50%) translate(2px,-2px); } .btn--outline:active { transform: translateY(0) scale(0.985); } .btn--ghost-invert { border: 1px solid var(--line); color: var(--text-hi); font-size: var(--fs-5); padding: 11px var(--space-11); } .btn--ghost-invert:hover { background: var(--text-hi); color: var(--ink); } .btn--full { width: 100%; padding: var(--space-8) 54px var(--space-8) var(--space-12); margin-top: var(--space-4); } .link-arrow { display: inline-flex; align-items: center; gap: var(--space-4); font-family: var(--font-display); font-weight: 600; font-size: var(--fs-8); color: var(--text-dark); border-bottom: 1px solid currentColor; padding-bottom: var(--space-1); width: fit-content; } .link-arrow::after { content: '→'; transition: transform 0.4s var(--ease-spring); } .link-arrow:hover::after { transform: translateX(4px); } /* A back link points the other way. Without this the shared ::after arrow is appended to a label that already leads with one, and it reads "← Back to plans →". */ .link-arrow--back::after { content: none; } .link-arrow--back::before { content: '←'; transition: transform 0.4s var(--ease-spring); } .link-arrow--back:hover::before { transform: translateX(-4px); } /* =================================================================== TICKER =================================================================== */ .ticker { background: var(--ink); color: var(--text-lo); overflow: hidden; white-space: nowrap; font-family: var(--font-display); font-size: var(--fs-2); letter-spacing: 0.08em; border-bottom: 1px solid var(--line-soft); position: relative; z-index: 200; } .ticker__track { display: inline-flex; gap: var(--space-7); padding: 7px 0; animation: ticker-scroll 32s linear infinite; } .ticker__track span { padding: 0 6px; } /* Fade the text into the bar at both edges — a marquee that hard-cuts at the viewport looks like clipped text rather than a moving line. */ .ticker::before, .ticker::after { content: ''; position: absolute; top: 0; bottom: 0; width: 72px; z-index: 1; pointer-events: none; } .ticker::before { left: 0; background: linear-gradient(90deg, var(--ink), rgba(5,5,6,0)); } .ticker::after { right: 0; background: linear-gradient(270deg, var(--ink), rgba(5,5,6,0)); } .ticker__stat { color: #FFDA7A; font-weight: 700; } @keyframes ticker-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* =================================================================== SKIP LINK — invisible until a keyboard user tabs to it =================================================================== */ .skip-link { position: absolute; top: -100px; left: 16px; z-index: 999; background: var(--ink); color: #fff; padding: var(--space-6) var(--space-10); border-radius: var(--r-xs); font-family: var(--font-display); font-weight: 600; font-size: var(--fs-11); text-decoration: none; transition: top 0.2s var(--ease); } .skip-link:focus { top: 16px; outline: 2px solid var(--blue-bright); outline-offset: 2px; } /* =================================================================== NAV — floating glass island =================================================================== */ .nav { position: fixed; top: var(--nav-top); /* .is-docked: the ticker has scrolled away, so close the gap it was holding. .is-hidden must come after it — same specificity, and hiding wins. */ left: 50%; transform: translateX(-50%); z-index: 190; color: var(--text-hi); width: max-content; max-width: calc(100vw - 32px); transition: top 0.3s var(--ease); } .nav.is-docked { top: 12px; } /* After .is-docked on purpose — same specificity, and hidden has to win. */ .nav.is-hidden { top: -90px; } .nav__inner { display: flex; align-items: center; gap: 30px; padding: 9px var(--space-5) 9px var(--space-10); background: rgba(8,10,18,0.72); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); border: 1px solid rgba(255,255,255,0.09); border-radius: var(--r-pill); box-shadow: 0 12px 30px -14px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.05); } .brand { display: flex; align-items: center; gap: var(--space-4); font-family: var(--font-display); font-weight: 700; font-size: var(--fs-13); letter-spacing: 0.02em; flex-shrink: 0; } .brand__mark { flex-shrink: 0; } .nav__links { display: flex; gap: var(--space-12); font-size: var(--fs-7); font-weight: 500; } .nav__links a { opacity: 0.85; transition: opacity 0.25s; } .nav__links a:hover { opacity: 1; } .nav__cta { flex-shrink: 0; } .nav__cta.btn--ghost-invert { font-size: 0.74rem; padding: var(--space-4) var(--space-8); } .nav__toggle { display: none; position: relative; flex-direction: column; justify-content: center; align-items: center; gap: var(--space-2); width: 30px; height: 30px; padding: 0; background: none; border: none; flex-shrink: 0; cursor: pointer; } /* This is the only way into the menu on a phone, so the glyph stays 30px but the tappable area reaches the 44px minimum. */ .nav__toggle::before { content: ''; position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); } .nav__toggle span { display: block; width: 16px; height: 2px; border-radius: 2px; background: var(--text-hi); transition: transform 0.3s var(--ease), opacity 0.3s var(--ease); } .nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); } .nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } @media (max-width: 860px) { .nav__toggle { display: flex; } .nav__links { flex-direction: column; align-items: stretch; gap: var(--space-1); position: absolute; top: calc(100% + 10px); left: 0; right: 0; min-width: 220px; background: rgba(8,10,18,0.94); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); border: 1px solid rgba(255,255,255,0.09); border-radius: 20px; padding: var(--space-5); box-shadow: 0 20px 40px -14px rgba(0,0,0,0.6); opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity 0.25s var(--ease), transform 0.25s var(--ease), visibility 0s linear 0.25s; } .nav__links.is-open { opacity: 1; visibility: visible; transform: translateY(0); transition: opacity 0.25s var(--ease), transform 0.25s var(--ease); } .nav__links a { padding: 11px var(--space-7); border-radius: 12px; } .nav__links a:hover { background: rgba(255,255,255,0.07); } } /* =================================================================== HERO (liquid cursor-reveal) =================================================================== */ /* Hero sits on white now, with the same soft blue/amber wash the .decay and .integrations sections use — a little glow, not a gradient feature. The WebGL starfield is gone (its init is skipped in index.html too); the giant JAPHONE watermark stays, restated in ink instead of bone. */ .hero { position: relative; min-height: 100vh; background: var(--paper-2); color: var(--text-dark); display: flex; flex-direction: column; overflow: hidden; isolation: isolate; } .hero__starfield { display: none; } .hero__fallback { display: none; } /* The blue and amber glows that used to drift across this section are gone. On the near-white surface they read as coloured haze rather than depth, and they fought the section tones for attention. Sections are now differentiated by tone alone. */ @keyframes hero-drift { 0% { transform: translate(0, 0) scale(1); } 100% { transform: translate(-3%, 2%) scale(1.06); } } /* Soft fade into the section below, so the watermark doesn't butt against the next block's edge. */ .hero__vignette { position: absolute; inset: 0; z-index: 2; background: linear-gradient(180deg, transparent 72%, rgba(255,255,255,0.75) 100%); pointer-events: none; } .hero__watermark { position: absolute; z-index: 1; left: 50%; bottom: -4vw; transform: translateX(-50%); font-family: var(--font-display); font-weight: 700; font-size: clamp(4rem, 22vw, 20rem); letter-spacing: 0.02em; color: rgba(var(--ink-rgb),0.055); white-space: nowrap; pointer-events: none; line-height: 1; } .hero__grid { position: relative; z-index: 3; flex: 1; display: grid; grid-template-columns: 1.25fr 0.85fr; gap: var(--space-16); align-items: center; max-width: 1220px; width: 100%; margin: 0 auto; padding: 150px var(--space-15) var(--space-16); pointer-events: none; } .hero__main { text-align: left; } .hero__eyebrow { display: inline-flex; font-family: var(--font-display); font-size: var(--fs-4); font-weight: 600; letter-spacing: 0.18em; color: var(--amber-deep); padding: 7px var(--space-8); border-radius: var(--r-pill); border: 1px solid rgba(154,117,0,0.22); background: rgba(255,209,102,0.16); margin-bottom: var(--space-12); } .hero__title { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; line-height: 1.08; letter-spacing: -0.01em; font-size: clamp(2.4rem, 5.6vw, 4.6rem); color: var(--text-dark); margin-bottom: var(--space-11); } .hero__title .line { display: block; overflow: hidden; padding: 0 2px; } .hero__title .word { display: inline-block; } .hero__title .word--accent { color: var(--amber-deep); } .hero__trust { display: flex; align-items: center; gap: 9px; font-family: var(--font-display); font-size: 0.75rem; letter-spacing: 0.04em; color: var(--text-dark-lo); margin-bottom: var(--space-9); } .hero__trust-dot { width: 7px; height: 7px; border-radius: 50%; background: #34D399; box-shadow: 0 0 0 4px rgba(52,211,153,0.18); flex-shrink: 0; } .hero__sub { font-size: clamp(1rem, 1.4vw, 1.15rem); color: var(--text-dark-lo); max-width: 520px; margin: 0 0 34px; } .hero__ctas { display: flex; gap: var(--space-8); justify-content: flex-start; flex-wrap: wrap; pointer-events: auto; } /* The shared .btn--outline is drawn for dark surfaces (white borders); on the white hero it needs ink instead. */ .hero .btn--outline { border-color: rgba(var(--ink-rgb),0.16); color: var(--text-dark); } .hero .btn--outline::after { background: rgba(var(--ink-rgb),0.05); border-color: rgba(var(--ink-rgb),0.1); } .hero .btn--outline:hover { border-color: var(--blue); color: var(--blue); } /* Aside stacks the logo orb above the rotating proof card. */ .hero__aside { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 30px; pointer-events: auto; } .orb.hero__orb { width: 150px; height: 150px; flex-shrink: 0; } .orb.hero__orb .orb__core { width: 132px; height: 132px; } .hero-card { width: 100%; max-width: 340px; background: var(--paper-2); border: 1px solid rgba(var(--ink-rgb),0.08); border-radius: 20px; padding: var(--space-11); box-shadow: var(--shadow-soft); } .hero-card__row { display: flex; gap: var(--space-7); align-items: flex-start; } .hero-card__mark { width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0; background: rgba(47,111,255,0.08); display: flex; align-items: center; justify-content: center; overflow: hidden; } .hero-card__mark img { width: 26px; height: 26px; object-fit: contain; } .hero-card__panel { flex: 1; min-width: 0; } .hero-card__slot { min-height: 58px; } .hero-card__caption { font-family: var(--font-display); font-size: var(--fs-1); letter-spacing: 0.12em; text-transform: uppercase; color: var(--amber-deep); margin-bottom: var(--space-3); } .hero-card__text { font-size: var(--fs-12); color: var(--text-dark); line-height: 1.45; } .hero-card__foot { display: flex; align-items: center; justify-content: space-between; margin-top: var(--space-8); padding-top: var(--space-7); border-top: 1px solid rgba(var(--ink-rgb),0.08); } .hero-card__dots { display: flex; gap: var(--space-3); } .hero-card__dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(var(--ink-rgb),0.18); transition: background 0.3s, transform 0.3s; } .hero-card__dot.is-active { background: var(--blue); transform: scale(1.3); } .hero-card__nav { display: flex; gap: var(--space-3); } .hero-card__btn { position: relative; width: 26px; height: 26px; border-radius: 50%; border: 1px solid rgba(var(--ink-rgb),0.14); background: transparent; color: var(--text-dark-lo); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.2s, border-color 0.2s, color 0.2s; } /* The visible dot stays small so the carousel controls don't overpower the card, but the tappable area still meets the 44px touch-target minimum. */ .hero-card__btn::before { content: ''; position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); } .hero-card__btn:hover { background: rgba(var(--ink-rgb),0.05); border-color: rgba(var(--ink-rgb),0.28); color: var(--text-dark); } .hero__status { position: relative; z-index: 3; display: flex; align-items: center; justify-content: space-between; max-width: 1220px; width: 100%; margin: 0 auto; padding: 0 32px 30px; font-family: var(--font-display); font-size: var(--fs-1); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dark-lo); pointer-events: none; } .hero__status-center { display: none; } .hero__status-scroll span { display: inline-block; animation: hero-bob 1.6s ease-in-out infinite; margin-left: var(--space-2); } @keyframes hero-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } } @media (min-width: 720px) { .hero__status-center { display: block; } } @media (max-width: 900px) { .hero__grid { grid-template-columns: 1fr; text-align: center; padding-top: 130px; } .hero__main { text-align: center; } .hero__trust { justify-content: center; } .hero__sub { margin-left: auto; margin-right: auto; } .hero__ctas { justify-content: center; } /* Keep the orb on small screens — only the proof card drops out. */ .hero__aside { gap: 0; } .hero__aside .hero-card { display: none; } .orb.hero__orb { width: 120px; height: 120px; } .orb.hero__orb .orb__core { width: 104px; height: 104px; } } @media (max-width: 620px) { /* On a phone the headline and the paragraph under it were close enough in weight that the eye landed on the paragraph first. The headline is the message, so it grows and the paragraph gives a little back. The vw term drives the middle of the range; the floor protects small phones and the ceiling stops it colliding with the 620px breakpoint. */ .hero__title { font-size: clamp(2.6rem, 12.6vw, 3.2rem); } .hero__sub { font-size: var(--fs-13); } } .reveal-up { opacity: 0; transform: translateY(24px); filter: blur(8px); } /* =================================================================== PROBLEM / DECAY (stat scrub section) =================================================================== */ .decay { position: relative; background: var(--paper-2); padding: 140px 0 0; } .decay::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 780px; pointer-events: none; z-index: 0; } .decay__gradient { display: none; } .decay__grid { position: relative; z-index: 1; max-width: var(--container); margin: 0 auto; padding: 0 32px 64px; display: grid; grid-template-columns: 0.5fr 1.5fr; gap: var(--space-12) 48px; } .decay__image-wrap { grid-column: 1; } .decay__image { width: 100%; aspect-ratio: 1; border-radius: 26px; /* The photo shows through clean — no tint layered over it. */ background: url("../assets/decay-photo.jpg") center/cover no-repeat, #0E1420; border: 1px solid rgba(var(--ink-rgb),0.08); box-shadow: var(--shadow-soft); } .decay__statement { grid-column: 2; font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: clamp(2rem, 4.4vw, 3.6rem); line-height: 1.02; color: var(--text-dark); } .decay__line { display: block; } .decay__line--dim { color: rgba(var(--ink-rgb),0.22); transition: color 0.5s var(--ease); } .decay__line--dim.is-lit { color: var(--text-dark); } .decay__copy { grid-column: 2; max-width: 560px; margin-top: var(--space-14); display: flex; flex-direction: column; gap: var(--space-8); } .decay__copy p { color: var(--text-dark-lo); font-size: var(--fs-14); } .decay__copy-fade { opacity: 0.45; transition: opacity 0.5s var(--ease); } .decay__copy-fade.is-lit { opacity: 1; } .decay__copy .link-arrow { color: var(--text-dark); margin-top: var(--space-3); } .decay__stats { grid-column: 1 / -1; margin-top: 90px; background: var(--paper); border-radius: var(--r-xl); padding: 76px 52px 64px; color: var(--text-dark); display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-16); box-shadow: var(--shadow-soft); } .decay__stats-label { grid-column: 1 / -1; font-family: var(--font-display); font-weight: 600; font-size: var(--fs-13); color: var(--text-dark-lo); border-bottom: 1px solid rgba(var(--ink-rgb),0.10); padding-bottom: var(--space-14); margin-bottom: var(--space-5); } .stat-block__number { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.6rem, 5vw, 4.2rem); line-height: 1; letter-spacing: -0.02em; } .stat-block__label { color: var(--text-dark-lo); margin-top: var(--space-5); max-width: 260px; font-size: var(--fs-13); } @media (max-width: 860px) { .decay__grid { grid-template-columns: 1fr; } .decay__image-wrap, .decay__statement, .decay__copy { grid-column: 1; } .decay__stats { grid-template-columns: 1fr; padding: 48px var(--space-12) 64px; } } /* =================================================================== PIPELINE (pinned scrollytelling) =================================================================== */ .pipeline { position: relative; background: var(--paper); } .pipeline::before { display: none; } .pipeline__pin { height: 100vh; will-change: transform; display: flex; flex-direction: column; justify-content: center; padding: 100px var(--space-15); max-width: var(--container); margin: 0 auto; } .pipeline__eyebrow { display: inline-flex; font-family: var(--font-display); font-weight: 600; font-size: var(--fs-2); letter-spacing: 0.16em; color: var(--blue); padding: 7px var(--space-8); border-radius: var(--r-pill); border: 1px solid rgba(47,111,255,0.22); background: rgba(47,111,255,0.07); margin-bottom: var(--space-9); } .pipeline__header h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.7rem, 3.6vw, 2.6rem); max-width: 700px; letter-spacing: -0.01em; } .pipeline__clock { position: absolute; top: 100px; right: 32px; font-family: var(--font-display); font-weight: 700; color: var(--text-dark-lo); display: flex; align-items: baseline; gap: var(--space-3); padding: var(--space-5) var(--space-9); border-radius: var(--r-pill); background: var(--paper-2); box-shadow: var(--shadow-soft); } .pipeline__clock #pipeline-seconds { font-size: 2.2rem; color: var(--blue); } .pipeline__clock-unit { font-size: 0.75rem; letter-spacing: 0.1em; } .pipeline__track { margin-top: 90px; position: relative; } .pipeline__line { position: absolute; top: 27px; left: 0; right: 0; height: 2px; background: rgba(var(--ink-rgb),0.08); } .pipeline__line-fill { height: 100%; width: 0%; background: var(--blue); } .pipeline__traveler { position: absolute; top: 27px; left: 0; width: 34px; height: 34px; margin-top: -16px; border-radius: 50%; background: var(--blue); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 26px -6px rgba(47,111,255,0.55), 0 0 0 6px rgba(47,111,255,0.10); will-change: transform; z-index: 2; } .pipeline__traveler svg { width: 16px; height: 16px; } .pipeline__stages { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-12); position: relative; } .stage { display: flex; flex-direction: column; align-items: flex-start; opacity: 0.32; transition: opacity 0.5s var(--ease); } .stage.is-active { opacity: 1; } .stage__dot { width: 14px; height: 14px; border-radius: 50%; background: var(--paper); border: 2px solid rgba(var(--ink-rgb),0.16); margin-bottom: var(--space-13); transition: background 0.4s var(--ease), border-color 0.4s var(--ease), transform 0.5s var(--ease-spring); } .stage.is-active .stage__dot { background: var(--blue); border-color: var(--blue); transform: scale(1.15); } .stage__icon { width: 44px; height: 44px; border-radius: var(--r-sm); background: var(--paper-2); box-shadow: var(--shadow-soft); display: flex; align-items: center; justify-content: center; color: var(--text-dark-lo); margin-bottom: var(--space-9); transition: color 0.4s var(--ease), background 0.4s var(--ease), transform 0.5s var(--ease-spring), box-shadow 0.4s var(--ease); } .stage.is-active .stage__icon { color: var(--blue); background: var(--blue-soft); transform: translateY(-3px) scale(1.05); box-shadow: 0 16px 30px -12px rgba(47,111,255,0.35); } .stage__icon svg { width: 20px; height: 20px; } .stage__title { font-family: var(--font-display); font-weight: 600; font-size: 0.98rem; margin-bottom: var(--space-4); } .stage__desc { font-size: var(--fs-8); color: var(--text-dark-lo); } @media (max-width: 900px) { .pipeline { height: auto; } .pipeline__pin { position: relative; height: auto; padding: 90px var(--space-12); } /* relative, not static: identical in flow, but it still has to be a containing block for its own lens ring. inset:auto is not optional here — the desktop rule's top:100px/right:32px are inherited into this breakpoint, and static ignored them where relative applies them as a shift. Without this the clock lands 100px low and 32px left of where it belongs. */ .pipeline__clock { position: relative; inset: auto; margin: 20px 0 0; width: fit-content; } .pipeline__stages { grid-template-columns: 1fr; gap: 36px; } .pipeline__line, .pipeline__traveler { display: none; } .stage { opacity: 1; } .stage.is-active .stage__dot, .stage .stage__dot { background: var(--blue); border-color: var(--blue); } .stage__icon { color: var(--blue); background: var(--blue-soft); } } /* =================================================================== SHOWCASE / FEATURES (pinned cycling cards) =================================================================== */ .showcase { position: relative; background: var(--paper-2); color: var(--text-dark); } .showcase__pin { height: 100vh; overflow: hidden; will-change: transform; } .showcase__bg-text { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700; font-size: clamp(3rem, 12vw, 9rem); color: rgba(var(--ink-rgb),0.035); text-transform: uppercase; white-space: nowrap; pointer-events: none; } .showcase__grid { position: relative; z-index: 1; height: 100%; max-width: var(--container); margin: 0 auto; padding: 0 32px; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 60px; } .showcase__eyebrow { display: inline-flex; font-family: var(--font-display); font-weight: 600; font-size: var(--fs-2); letter-spacing: 0.16em; color: var(--blue); padding: 7px var(--space-8); border-radius: var(--r-pill); border: 1px solid rgba(47,111,255,0.28); background: rgba(47,111,255,0.09); margin-bottom: var(--space-10); } .showcase__lede { font-size: clamp(1.3rem, 2.4vw, 1.8rem); font-weight: 500; max-width: 420px; line-height: 1.3; } .showcase__dots { display: flex; gap: var(--space-4); margin-top: var(--space-16); } .showcase__dots span { width: 8px; height: 8px; border-radius: 50%; background: rgba(var(--ink-rgb),0.14); transition: background 0.4s var(--ease), transform 0.4s var(--ease-spring); } .showcase__dots span.is-active { background: var(--blue-bright); transform: scale(1.3); } .showcase__card { padding: var(--space-16) var(--space-16) 44px; background: var(--paper-2); border: 1px solid rgba(var(--ink-rgb),0.08); border-radius: 28px; box-shadow: var(--shadow-soft); } .showcase__card-icon { width: 54px; height: 54px; border-radius: 16px; background: var(--blue-soft); box-shadow: inset 0 1px 0 rgba(255,255,255,0.12); color: var(--blue-bright); display: flex; align-items: center; justify-content: center; margin-bottom: var(--space-13); } .showcase__card-icon svg { width: 26px; height: 26px; } .showcase__card-title { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.6rem, 2.6vw, 2.1rem); margin-bottom: var(--space-7); } .showcase__card-desc { color: var(--text-dark-lo); font-size: var(--fs-14); max-width: 420px; } @media (max-width: 900px) { /* Unpinned, like the pipeline and the pillars. A pinned section costs the reader two and a half screens of scrolling to pass, and on a phone there is no cursor to make the cycling feel like a reward for it. Every feature is simply shown at once instead — js/main.js renders them all rather than one, since without the scrub nothing would advance the card. */ .showcase__pin { height: auto; overflow: visible; padding: 90px 0; } .showcase__grid { grid-template-columns: 1fr; height: auto; gap: var(--space-15); } .showcase__bg-text { display: none; } /* The dots track a card that no longer changes. */ .showcase__dots { display: none; } .showcase__card { margin-top: 0; padding: var(--space-14); } /* The container carries .showcase__card too, so it has to give up its own panel styling once it is holding a stack of them. */ .showcase__card.showcase__cards { display: flex; flex-direction: column; gap: var(--space-8); padding: 0; background: none; border: none; box-shadow: none; } .showcase__card-title { font-size: 1.25rem; margin-bottom: var(--space-4); } .showcase__card-desc { font-size: var(--fs-13); max-width: none; } .showcase__card-icon { width: 44px; height: 44px; } .showcase__card-icon svg { width: 22px; height: 22px; } } /* =================================================================== ALWAYS ON (visual break) =================================================================== */ .alwayson { position: relative; background: var(--paper); color: var(--text-dark); padding: 160px 0; overflow: hidden; } .alwayson__bg { position: absolute; inset: 0; } .alwayson__content { position: relative; max-width: var(--container); margin: 0 auto; padding: 0 32px; display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 80px; align-items: center; } .alwayson__phone { position: relative; width: 280px; min-height: 480px; /* Solid dark device on the section’s light background — the old rgba(13,17,25,0.6) + blur(20px) was frosted glass tuned for sitting over a dark section backdrop; on the light background it let the page show through and read as a flat gray blob instead of a phone. */ background: linear-gradient(160deg, #1A1F29, #10131A); border: 1px solid var(--line); border-radius: 38px; padding: 44px var(--space-9) var(--space-12); box-shadow: var(--shadow-glass), 0 40px 90px rgba(0,0,0,0.35); display: flex; flex-direction: column; gap: var(--space-5); } .alwayson__phone-notch { position: absolute; top: 16px; left: 50%; transform: translateX(-50%); width: 90px; height: 18px; border-radius: var(--r-xs); background: #060709; } .alwayson__bubble { max-width: 82%; padding: 11px var(--space-7); border-radius: 16px; font-size: var(--fs-7); line-height: 1.4; opacity: 0; transform: translateY(10px); } .alwayson__bubble--in { align-self: flex-start; background: #1B212D; color: var(--text-hi); border-bottom-left-radius: 4px; } .alwayson__bubble--out { align-self: flex-end; background: var(--blue-cta); color: #fff; border-bottom-right-radius: 4px; box-shadow: 0 10px 24px -8px rgba(47,111,255,0.5); } .alwayson__typing { display: flex; gap: var(--space-2); align-self: flex-start; padding: var(--space-4) var(--space-6); opacity: 0; } .alwayson__typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--text-lo); animation: typing-dot 1.2s infinite; } .alwayson__typing span:nth-child(2) { animation-delay: 0.2s; } .alwayson__typing span:nth-child(3) { animation-delay: 0.4s; } @keyframes typing-dot { 0%, 60%, 100% { opacity: 0.3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } } /* Qualified to outrank `.alwayson__text p`, which previously won on both specificity and source order and stripped this pill of its accent colour and its 0.68rem size. */ .alwayson__text p.alwayson__eyebrow { display: inline-flex; font-family: var(--font-display); font-weight: 600; font-size: var(--fs-2); letter-spacing: 0.16em; color: var(--amber-deep); padding: 7px var(--space-8); border-radius: var(--r-pill); border: 1px solid rgba(255,209,102,0.3); background: rgba(255,209,102,0.09); margin-bottom: var(--space-10); } .alwayson__text h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.8rem, 3.4vw, 2.6rem); line-height: 1.15; margin-bottom: var(--space-10); max-width: 560px; color: var(--text-dark); } .alwayson__text p { color: var(--text-dark-lo); font-size: var(--fs-14); max-width: 480px; } @media (max-width: 860px) { .alwayson__content { grid-template-columns: 1fr; } .alwayson__phone { margin: 0 auto; } } /* =================================================================== PILLARS (zoom-out reveal) =================================================================== */ .pillars { position: relative; background: var(--paper); } .pillars::before { display: none; } .pillars__pin { height: 100vh; will-change: transform; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; max-width: 1100px; margin: 0 auto; padding: 0 32px; } .pillars__center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(1); text-align: center; } .orb { width: 120px; height: 120px; display: flex; align-items: center; justify-content: center; position: relative; } /* The orb is the Japhone logo mark rendered as a solid sphere: the same 135deg blue gradient as assets/logo-mark.png (sampled off the file itself — #729EFF -> #3D79FF -> #1A40A8), minus the white JP glyph. Filled all the way through: no transparent centre, no cut-out ring. The motion lives in the breathing scale, the outer glow, and a sheen that drifts across the surface like a light source moving over a ball. */ .orb__core { width: 92px; height: 92px; flex-shrink: 0; border-radius: 50%; background: linear-gradient(135deg, #729EFF 0%, #3D79FF 52%, #1A40A8 100%); border: 1px solid rgba(140,180,255,0.28); box-shadow: 0 0 46px rgba(47,111,255,0.32), inset 0 0 26px rgba(4,11,32,0.45); position: relative; overflow: hidden; animation: orb-breathe 4.2s ease-in-out infinite; } /* Drifting specular sheen. Blue-tinted rather than white, so the mark still reads as the logo ball and not a glossy button. */ .orb__core::before { content: ''; position: absolute; inset: 0; border-radius: 50%; pointer-events: none; background: radial-gradient(circle at 33% 27%, rgba(104,148,226,0.5), rgba(104,148,226,0.14) 40%, transparent 64%); animation: orb-sheen 7s ease-in-out infinite; } /* Shading at the lower right — what turns the logo's flat diagonal gradient into a sphere rather than a disc. */ .orb__core::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 72% 78%, rgba(2,7,22,0.42), transparent 62%); pointer-events: none; } @keyframes orb-breathe { 0%, 100% { transform: scale(1); box-shadow: 0 0 46px rgba(47,111,255,0.32), inset 0 0 26px rgba(4,11,32,0.45); } 50% { transform: scale(1.035); box-shadow: 0 0 64px rgba(47,111,255,0.44), inset 0 0 32px rgba(4,11,32,0.5); } } @keyframes orb-sheen { 0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.85; } 50% { transform: translate(5%, 4%) scale(1.07); opacity: 1; } } .pillars__center-label { font-family: var(--font-display); font-weight: 700; letter-spacing: 0.1em; margin-top: var(--space-5); color: var(--text-dark-lo); font-size: var(--fs-8); } .pillar { align-self: center; opacity: 0; max-width: 300px; padding: var(--space-12); border-radius: 22px; background: var(--paper-2); box-shadow: var(--shadow-soft); } .pillar--tl { justify-self: start; align-self: start; margin-top: var(--space-16); } .pillar--tr { justify-self: end; align-self: start; margin-top: var(--space-16); text-align: right; } .pillar--bl { justify-self: start; align-self: end; margin-bottom: var(--space-16); } .pillar--br { justify-self: end; align-self: end; margin-bottom: var(--space-16); text-align: right; } .pillar__title { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; margin-bottom: var(--space-5); } .pillar__desc { color: var(--text-dark-lo); font-size: var(--fs-12); } @media (max-width: 900px) { .pillars { height: auto; } .pillars__pin { position: relative; height: auto; display: flex; flex-direction: column; gap: var(--space-10); padding: 100px var(--space-12); } .pillars__center { position: static; transform: none; margin-bottom: var(--space-6); } /* .orb is a fixed-width flex box, so in the stacked column it hugs the left edge even though its label is centred. Centre the orb itself. */ .pillars__center .orb { margin-left: auto; margin-right: auto; } .pillar { /* No opacity override here (there used to be one, forcing opacity: 1 !important) — js/main.js's initPillars now gives each one its own scroll-triggered reveal on mobile, same as the pipeline and showcase sections. !important would have out-ranked that reveal's inline opacity, leaving every pillar stuck fully visible with no animation. */ max-width: 100%; text-align: left !important; margin: 0 !important; /* --bl and --br carry align-self: end from the desktop grid, which in a column flex container means "right edge" rather than "bottom". */ align-self: stretch !important; } } /* =================================================================== TESTIMONIALS =================================================================== */ .testimonials { background: var(--paper-3); padding: 170px var(--space-15); } .testimonials__head { max-width: 700px; margin: 0 auto 70px; text-align: center; display: flex; flex-direction: column; align-items: center; } .testimonials__head h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.6rem, 3vw, 2.3rem); line-height: 1.15; letter-spacing: -0.02em; } .testimonials__list { max-width: var(--container); margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-15); } .testimonial { padding: 34px; border-radius: var(--r-lg); background: var(--paper-2); box-shadow: var(--shadow-soft); transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease); } .testimonial:hover { transform: translateY(-4px); box-shadow: 0 40px 80px -30px rgba(var(--ink-rgb),0.22), 0 10px 24px -14px rgba(var(--ink-rgb),0.12); } .testimonial__avatar { width: 44px; height: 44px; margin-bottom: var(--space-10); } .testimonial__quote { font-size: 1rem; line-height: 1.55; margin-bottom: var(--space-10); } .testimonial__attr { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-8); color: var(--text-dark-lo); } .testimonial__stars { display: flex; gap: 3px; margin-bottom: var(--space-8); } .testimonial__star { width: 16px; height: 16px; fill: #E4E6EB; stroke: #B8BCC6; stroke-width: 1px; } .testimonial__star.is-filled { fill: #FFB020; stroke: #FFB020; } .testimonials__cta { display: flex; justify-content: center; margin-top: 56px; } /* The verified mark is a factual claim — the review was left from a signed-in Japhone account — so it is styled to be read, not to decorate. Green reads as "checked" without competing with the amber stars above it. */ .testimonial__meta { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; margin-top: var(--space-6); } .testimonial__verified { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-display); font-weight: 600; font-size: var(--fs-2); letter-spacing: 0.01em; color: #0F7B4F; background: rgba(16, 150, 95, 0.10); border-radius: var(--r-pill); padding: 3px 9px 3px 7px; } .testimonial__verified svg { width: 12px; height: 12px; flex: none; } /* Inline inside a sentence in the trust strip, where a pill background would break the line rhythm. */ .testimonial__verified--inline { background: none; padding: 0; color: #0F7B4F; } .testimonial__date { font-size: var(--fs-2); color: var(--text-dark-lo); } /* States plainly how reviews get here. It sits under the list rather than above it so it reads as a footnote to the evidence, not a preamble. */ .testimonials__trust { max-width: 640px; margin: var(--space-12) auto 0; text-align: center; font-size: var(--fs-5); line-height: 1.6; color: var(--text-dark-lo); } @media (max-width: 900px) { .testimonials__list { grid-template-columns: 1fr; } } /* Opting out of being named. Sits on one line rather than using the stacked label rows the rest of the form uses, and the hint sits under the label so the trade-off is visible at the moment of the decision rather than only in the consent paragraph below the button. */ .review-anon { display: flex; align-items: flex-start; gap: var(--space-5); margin: var(--space-8) 0 var(--space-4); } .review-anon input { margin: 3px 0 0; width: 16px; height: 16px; flex: none; accent-color: var(--blue); cursor: pointer; } .review-anon label { display: block; font-size: var(--fs-8); font-weight: 600; cursor: pointer; } .review-anon__hint { display: block; font-weight: 400; font-size: var(--fs-5); color: var(--text-dark-lo); margin-top: 2px; } /* =================================================================== LEAVE A REVIEW — modal =================================================================== */ /* .review-modal sets display:flex unconditionally below, which — as an author-stylesheet rule — otherwise beats the UA stylesheet's [hidden] { display:none } regardless of specificity. Restore it explicitly. */ [hidden] { display: none !important; } .review-modal { position: fixed; inset: 0; z-index: 500; display: flex; align-items: center; justify-content: center; padding: var(--space-12); } .review-modal__backdrop { position: absolute; inset: 0; background: rgba(5,6,9,0.6); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: review-fade-in 0.35s var(--ease); } .review-modal__panel { position: relative; z-index: 1; width: 100%; max-width: 480px; max-height: calc(100vh - 48px); overflow-y: auto; background: var(--paper-2); border-radius: 28px; box-shadow: var(--shadow-glass), 0 60px 120px -30px rgba(0,0,0,0.5); padding: 44px var(--space-16) var(--space-16); color: var(--text-dark); animation: review-panel-in 0.4s var(--ease); } @keyframes review-fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes review-panel-in { from { opacity: 0; transform: translateY(18px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } } .review-modal__close { position: absolute; top: 20px; right: 20px; width: 36px; height: 36px; border-radius: 50%; border: none; background: rgba(var(--ink-rgb),0.05); color: var(--text-dark-lo); font-size: 1.3rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.25s var(--ease), color 0.25s var(--ease), transform 0.25s var(--ease); } .review-modal__close:hover { background: rgba(var(--ink-rgb),0.1); color: var(--text-dark); transform: rotate(90deg); } .review-modal__title { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; margin: 10px 0 10px; line-height: 1.2; } .review-modal__sub { font-size: var(--fs-12); color: var(--text-dark-lo); line-height: 1.55; margin-bottom: var(--space-13); } .review-modal__account-note { font-size: var(--fs-7); color: var(--text-dark-lo); background: var(--blue-soft); border-radius: var(--r-xs); padding: var(--space-5) var(--space-7); margin: -6px 0 18px; } .review-modal__account-note strong { color: var(--blue); } .review-modal__note { font-size: var(--fs-8); color: var(--amber-deep); min-height: 18px; margin-top: var(--space-1); } /* .contact__form's input styling (light text on a near-transparent dark-ish background) assumes the dark contact section it was built for. This modal has a white panel, so that combination was unreadable — same class of bug as the star fill. Scoped override, not a global change, since the same .contact__form class is still correctly used on dark surfaces elsewhere (the sign-in form, account.html's setup form). */ .review-modal__panel .contact__form input, .review-modal__panel .contact__form textarea { color: var(--text-dark); background: rgba(var(--ink-rgb),0.035); border-color: rgba(var(--ink-rgb),0.14); } .review-modal__panel .contact__form input:focus, .review-modal__panel .contact__form textarea:focus { border-color: var(--blue); background: rgba(47,111,255,0.05); } .review-modal__panel .contact__form label { color: var(--text-dark-lo); } .review-stars { display: flex; gap: var(--space-4); margin-bottom: var(--space-11); } .review-star { position: relative; width: 34px; height: 34px; padding: 0; border: none; background: none; cursor: pointer; transition: transform 0.2s var(--ease-spring); } /* The stars stay 34px so a five-star row still reads as one control, but the tappable area is padded out to the 44px minimum. Horizontally the row's own 8px gap absorbs most of it; vertically there is nothing to collide with. */ .review-star::before { content: ''; position: absolute; top: 50%; left: 50%; width: 42px; height: 44px; transform: translate(-50%, -50%); } .review-star:hover { transform: scale(1.15); } /* var(--line) (near-transparent white) was the bug here — that token is meant for borders on DARK backgrounds, but this modal has a white panel, so unselected stars were nearly invisible. Visible light-gray fill + a real stroke so the star shape always reads, selected or not. */ .review-star svg { width: 100%; height: 100%; fill: #E4E6EB; stroke: #B8BCC6; stroke-width: 1.2px; transition: fill 0.2s var(--ease), stroke 0.2s var(--ease); } .review-star.is-filled svg { fill: #FFB020; stroke: #FFB020; } .review-modal__success-view { text-align: center; padding: 20px 0 10px; } .review-modal__success-icon { width: 64px; height: 64px; margin: 0 auto 22px; border-radius: 50%; background: var(--blue-soft); color: var(--blue); display: flex; align-items: center; justify-content: center; animation: review-panel-in 0.5s var(--ease-spring); } .review-modal__success-icon svg { width: 28px; height: 28px; } .review-modal__success-view .review-modal__title { margin-top: 0; } .review-modal__success-view .review-modal__sub { margin-bottom: var(--space-14); } @media (max-width: 560px) { .review-modal__panel { padding: 36px var(--space-12) var(--space-15); border-radius: 22px; } } /* =================================================================== INTEGRATIONS MARQUEE =================================================================== */ .integrations { background: var(--paper); padding: 110px var(--space-15) 140px; text-align: center; } .integrations__lede { font-size: 1.05rem; color: var(--text-dark-lo); max-width: 460px; margin: 0 auto 50px; } .integrations__marquee { overflow: hidden; border-top: 1px solid rgba(var(--ink-rgb),0.08); border-bottom: 1px solid rgba(var(--ink-rgb),0.08); padding: 28px 0; } .integrations__track { display: inline-flex; gap: var(--space-10); white-space: nowrap; font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; color: var(--text-dark-lo); animation: ticker-scroll 26s linear infinite; } .integrations__track span:nth-child(odd):not(:first-child) { color: var(--blue); } /* =================================================================== FAQ =================================================================== */ .faq { background: var(--paper-2); padding: 170px var(--space-15); } .faq__head { max-width: var(--container); margin: 0 auto 50px; display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-12); flex-wrap: wrap; } .faq__head h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.2rem, 4vw, 3.2rem); line-height: 1.08; letter-spacing: -0.02em; } .faq__head p { color: var(--text-dark-lo); max-width: 280px; } .faq__list { max-width: var(--container); margin: 0 auto; border-top: 1px solid rgba(var(--ink-rgb),0.10); } .faq__item { border-bottom: 1px solid rgba(var(--ink-rgb),0.10); transition: background 0.3s var(--ease); border-radius: var(--r-md); } .faq__item:hover { background: rgba(var(--ink-rgb),0.02); } .faq__q { width: 100%; display: flex; align-items: center; gap: var(--space-12); padding: var(--space-13) var(--space-6); text-align: left; font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; } .faq__num { color: var(--text-dark-lo); font-size: var(--fs-8); width: 24px; flex-shrink: 0; } .faq__q span:nth-child(2) { flex: 1; } .faq__toggle { font-size: 1.1rem; color: var(--blue); flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; background: var(--blue-soft); display: flex; align-items: center; justify-content: center; transition: transform 0.5s var(--ease-spring), background 0.3s var(--ease); } .faq__item.is-open .faq__toggle { transform: rotate(45deg); background: var(--blue); color: #fff; } .faq__a { max-height: 0; overflow: hidden; transition: max-height 0.5s var(--ease); } .faq__a p { padding: 0 12px 26px 60px; color: var(--text-dark-lo); max-width: 640px; } /* =================================================================== CONTACT =================================================================== */ .pricing-section, .contact { background: var(--paper-2); color: var(--text-dark); padding: 170px var(--space-15) 110px; position: relative; overflow: hidden; } .contact__inner { position: relative; max-width: var(--container); margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; } .contact__intro h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.2rem, 4.6vw, 3.4rem); margin-bottom: var(--space-10); } .contact__sub { color: var(--text-dark-lo); font-size: var(--fs-14); max-width: 440px; margin-bottom: var(--space-15); } .contact__points { display: flex; flex-direction: column; gap: var(--space-6); } .contact__points li { display: flex; align-items: center; gap: var(--space-5); color: var(--text-dark-lo); font-size: var(--fs-12); } .contact__points li::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--blue); flex-shrink: 0; } .contact__form { display: flex; flex-direction: column; gap: var(--space-10); background: var(--paper-2); border: 1px solid rgba(var(--ink-rgb),0.08); border-radius: 28px; padding: 36px; box-shadow: var(--shadow-soft); } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-10); } .contact__form label { display: flex; flex-direction: column; gap: var(--space-4); font-size: var(--fs-7); color: var(--text-dark-lo); } .contact__form input, .contact__form textarea, .contact__form select { background: rgba(var(--ink-rgb),0.03); border: 1px solid rgba(var(--ink-rgb),0.14); border-radius: 12px; padding: 13px var(--space-7); color: var(--text-dark); transition: border-color 0.3s var(--ease), background 0.3s var(--ease); resize: vertical; } .contact__form input:focus, .contact__form textarea:focus, .contact__form select:focus { outline: none; border-color: var(--blue); background: rgba(47,111,255,0.05); } /* color-scheme is a hint some browsers ignore for the dropdown popup itself (confirmed: Chrome/Windows rendered the option list with a white background and near-white text — unreadable). Styling