/* ========================================================================== DigitalRockets — design system Fonts are loaded from the HTML (preconnect + link), never @import: an @import inside CSS chains the request behind the stylesheet and delays first paint. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Tokens -------------------------------------------------------------------------- */ :root { /* Surfaces */ --night: #06130e; --night-2: #0a1d15; --night-3: #0e2718; /* Text — contrast ratios measured against --night */ --ink: #e9f3ed; /* 14.9:1 */ --ink-soft: #c3d3c9; /* 12.2:1 — long-form body copy */ --muted: #91a49a; /* 7.2:1 — secondary copy */ --dim: #7c8f84; /* 5.5:1 — mono labels, meta. Was #5e7167 (3.6:1, failed AA) */ /* Brand */ --lime: #00bf63; /* 7.8:1 */ --lime-bright: #2df779; --lime-wash: rgba(0, 191, 99, .1); --lime-edge: rgba(0, 191, 99, .34); /* Lines & glass */ --line: rgba(220, 255, 236, .12); --line-strong: rgba(220, 255, 236, .24); --glass: rgba(226, 255, 238, .055); --danger: #ff9c8b; /* Type */ --heading: 'Manrope', system-ui, -apple-system, sans-serif; --mono: 'DM Mono', ui-monospace, 'SF Mono', monospace; --fs-display: clamp(3rem, 6.6vw, 5.4rem); --fs-h1: clamp(2.6rem, 5.4vw, 4.4rem); --fs-h2: clamp(2rem, 3.8vw, 3.4rem); --fs-h3: clamp(1.45rem, 2.3vw, 1.95rem); --fs-h4: 1.16rem; --fs-lead: clamp(1.02rem, 1.3vw, 1.16rem); --fs-sm: .875rem; --fs-xs: .78rem; --fs-mono: .68rem; /* Space */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --section-y: clamp(72px, 8.5vw, 124px); /* Radii & motion */ --r-1: 8px; --r-2: 12px; --r-3: 18px; --r-pill: 999px; --ease: cubic-bezier(.22, .61, .36, 1); } /* -------------------------------------------------------------------------- 2. Base -------------------------------------------------------------------------- */ * { box-sizing: border-box; } html { scroll-behavior: smooth; background: var(--night); -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--night); color: var(--ink); font-family: var(--heading); font-size: 1rem; line-height: 1.5; overflow-x: hidden; -webkit-font-smoothing: antialiased; } body::before { content: ''; position: fixed; z-index: -2; inset: 0; background: radial-gradient(ellipse 80% 50% at 50% -10%, rgba(0, 191, 99, .13), transparent 64%), linear-gradient(145deg, #06130e 0%, #081a12 48%, #05110c 100%); } a { color: inherit; text-decoration: none; } img { display: block; max-width: 100%; } button { font: inherit; } /* Keyboard users get a visible ring everywhere. The site had none before. */ :focus-visible { outline: 2px solid var(--lime-bright); outline-offset: 3px; border-radius: 3px; } /* Skip link — first tab stop, hidden until focused */ .skip-link { position: absolute; z-index: 20; top: var(--s-3); left: var(--s-3); padding: 10px 16px; border-radius: var(--r-1); background: var(--lime); color: #04170e; font-size: var(--fs-sm); font-weight: 700; transform: translateY(-160%); transition: transform .2s var(--ease); } .skip-link:focus { transform: none; } .container { width: min(1180px, calc(100% - 48px)); margin-inline: auto; } .section { position: relative; padding: var(--section-y) 0; } .noise { position: fixed; inset: 0; z-index: 9; opacity: .035; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E"); } .glass-panel { border: 1px solid var(--line); background: linear-gradient(135deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .025)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .065), 0 24px 60px rgba(0, 0, 0, .16); backdrop-filter: blur(18px); } .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* -------------------------------------------------------------------------- 3. Typography primitives -------------------------------------------------------------------------- */ h1, h2, h3, h4 { font-weight: 700; letter-spacing: -.045em; } .eyebrow { display: flex; align-items: center; gap: 9px; margin: 0 0 var(--s-5); color: var(--lime); font: 500 var(--fs-mono) / 1.4 var(--mono); letter-spacing: .13em; } .eyebrow.centered { justify-content: center; } .section-number { color: var(--dim); margin-right: var(--s-1); } .status-dot { flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 5px rgba(0, 191, 99, .12), 0 0 20px var(--lime); animation: status 2.5s infinite; } .lede { max-width: 54ch; margin: var(--s-6) 0 var(--s-6); color: var(--muted); font-size: var(--fs-lead); line-height: 1.7; } .section-heading { margin-bottom: var(--s-7); } .section-heading h2, .journal-head h2, .faq h2, .build-header h2 { margin: 0; font-size: var(--fs-h2); line-height: 1.06; letter-spacing: -.052em; } h2 em, h1 em { font-style: normal; color: var(--lime); font-weight: 600; } /* -------------------------------------------------------------------------- 4. Buttons & links -------------------------------------------------------------------------- */ .button { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-5); border: 0; border-radius: var(--r-1); padding: 15px 18px 15px 21px; font-weight: 700; font-size: .9rem; cursor: pointer; transition: transform .3s var(--ease), box-shadow .3s var(--ease), background .3s; } .button-primary { background: var(--lime); color: #04170e; box-shadow: 0 9px 30px rgba(0, 191, 99, .16); } .button-primary:hover { transform: translateY(-3px); background: var(--lime-bright); box-shadow: 0 15px 38px rgba(0, 191, 99, .24); } .button-ghost { border: 1px solid var(--line-strong); background: transparent; color: var(--ink); } .button-ghost:hover { border-color: var(--lime); color: var(--lime); } .arrow { font-family: var(--mono); font-size: 1.12rem; } .text-link { display: inline-flex; align-items: center; gap: var(--s-3); color: var(--muted); font-size: .88rem; font-weight: 650; transition: color .2s; } .text-link:hover { color: var(--lime); } .strong-link { color: var(--ink); border-bottom: 1px solid var(--lime); padding-bottom: 6px; } .row-arrow { position: relative; z-index: 1; display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid var(--line); border-radius: 50%; color: var(--lime); transition: all .25s var(--ease); } .reveal { opacity: 0; transform: translateY(22px); transition: opacity .8s var(--ease), transform .8s var(--ease); } .reveal.visible { opacity: 1; transform: none; } .delay-1 { transition-delay: .1s; } .delay-2 { transition-delay: .2s; } .delay-3 { transition-delay: .3s; } /* -------------------------------------------------------------------------- 5. Header -------------------------------------------------------------------------- */ .site-header { position: absolute; z-index: 5; top: 0; width: 100%; padding: 19px 0; } .nav { display: flex; align-items: center; gap: var(--s-6); } .brand { display: inline-flex; align-items: center; gap: 9px; font-size: 1.16rem; font-weight: 800; letter-spacing: -.04em; white-space: nowrap; } .brand > span:last-child span { color: var(--lime); } .brand-mark { flex: 0 0 auto; display: block; width: 31px; height: 31px; overflow: hidden; } .brand-mark img { height: 31px; width: auto; max-width: none; } .nav-panel { display: flex; align-items: center; gap: 3px; margin-left: auto; } .nav-panel > a { color: var(--muted); font-size: .88rem; font-weight: 600; padding: 9px 14px; transition: color .25s var(--ease); } .nav-panel > a:hover, .nav-panel > a[aria-current="page"] { color: var(--ink); } .nav-panel .nav-cta { margin-left: 9px; border: 1px solid var(--lime-edge); border-radius: var(--r-pill); padding: 9px 16px; color: var(--lime); } .nav-panel .nav-cta:hover { background: var(--lime); color: #052011; } /* Real link to the translated page, not a JS toggle */ .lang-switch { display: inline-flex; align-items: center; gap: 5px; padding: 7px 11px; border: 1px solid var(--line); border-radius: var(--r-pill); color: var(--dim); font: 500 var(--fs-mono) / 1 var(--mono); letter-spacing: .06em; transition: color .25s, border-color .25s; } .lang-switch:hover { color: var(--lime); border-color: var(--lime-edge); } .lang-switch b { color: var(--lime); font-weight: 500; } .menu-toggle { display: none; } /* -------------------------------------------------------------------------- 6. Hero -------------------------------------------------------------------------- */ .hero { position: relative; isolation: isolate; overflow: hidden; min-height: 780px; padding-top: 126px; } .hero-grid { position: absolute; z-index: -1; inset: 0; background-image: linear-gradient(rgba(93, 181, 127, .055) 1px, transparent 1px), linear-gradient(90deg, rgba(93, 181, 127, .055) 1px, transparent 1px); background-size: 66px 66px; mask-image: linear-gradient(to bottom, black, transparent 88%); } .hero-grid::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, var(--night) 2%, transparent 48%, var(--night) 100%); } .aurora { position: absolute; z-index: -1; filter: blur(5px); border-radius: 50%; pointer-events: none; } .aurora-one { width: 680px; height: 390px; right: -75px; top: 90px; background: radial-gradient(ellipse, rgba(0, 191, 99, .22), rgba(0, 191, 99, .035) 51%, transparent 71%); transform: rotate(-18deg); } .aurora-two { width: 430px; height: 470px; left: 25%; top: -280px; background: radial-gradient(ellipse, rgba(23, 105, 67, .2), transparent 65%); } .hero-layout { min-height: 620px; display: grid; grid-template-columns: 1.02fr .98fr; align-items: center; gap: var(--s-7); } .hero-copy { padding: 35px 0 32px; } .hero-copy h1 { max-width: 15ch; margin: 0; color: #f2f8f4; font-size: var(--fs-display); font-weight: 800; letter-spacing: -.055em; line-height: .99; } .hero-copy h1 em { font-weight: 500; } .hero-actions { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; } .trust-row { display: flex; gap: 11px; align-items: center; margin-top: var(--s-8); color: var(--dim); font: 500 .64rem var(--mono); letter-spacing: .08em; } .trust-row > span:nth-child(even) { width: 3px; height: 3px; border-radius: 50%; background: var(--lime); } .hero-art { position: relative; height: 510px; margin-left: var(--s-2); } .orbit { position: absolute; right: -13%; top: 0; border: 1px solid rgba(0, 191, 99, .14); border-radius: 50%; } .orbit-one { width: 450px; height: 450px; } .orbit-two { width: 585px; height: 585px; right: -28%; top: -68px; border-color: rgba(0, 191, 99, .08); } .browser-window { position: absolute; right: 3%; top: 62px; width: min(100%, 465px); border-radius: var(--r-2); overflow: hidden; transform: rotate(5deg); animation: float 6s ease-in-out infinite; } .window-bar { display: flex; align-items: center; gap: 5px; height: 39px; padding: 0 13px; border-bottom: 1px solid var(--line); background: rgba(6, 19, 14, .72); } .window-bar span { width: 6px; height: 6px; border-radius: 50%; background: #537166; } .window-bar span:first-child { background: var(--lime); } .window-bar p { margin: 0 auto; color: #7d9c8d; font: 400 .59rem var(--mono); } .window-bar b { color: var(--lime); font: 400 .8rem var(--mono); } .window-body { position: relative; min-height: 371px; padding: 36px 38px; overflow: hidden; background: radial-gradient(circle at 73% 33%, rgba(0, 191, 99, .18), transparent 26%), linear-gradient(135deg, #0d291c, #071b12 66%); } .window-body::after { content: ''; position: absolute; width: 400px; height: 400px; right: -245px; bottom: -245px; border: 1px solid var(--lime-edge); border-radius: 50%; box-shadow: 0 0 0 38px rgba(0, 191, 99, .035), 0 0 0 76px rgba(0, 191, 99, .025); } .mini-label { margin: 0; color: var(--lime); font: 500 .58rem var(--mono); letter-spacing: .1em; } .window-body h2 { position: relative; z-index: 1; margin: var(--s-5) 0 0; font-size: 3.4rem; line-height: .91; letter-spacing: -.055em; } .window-body h2 i { color: var(--lime); font-weight: 500; font-style: normal; } .interface-chart { position: absolute; z-index: 1; right: 30px; bottom: 60px; width: 170px; height: 112px; display: flex; align-items: end; gap: var(--s-3); padding: 0 var(--s-3); border-left: 1px solid rgba(233, 243, 237, .18); border-bottom: 1px solid rgba(233, 243, 237, .18); } .interface-chart span { display: block; width: 12px; height: var(--h); background: linear-gradient(to top, var(--lime), rgba(0, 191, 99, .21)); box-shadow: 0 0 13px rgba(0, 191, 99, .18); } .interface-chart span:nth-child(1) { --h: 25%; } .interface-chart span:nth-child(2) { --h: 48%; } .interface-chart span:nth-child(3) { --h: 37%; } .interface-chart span:nth-child(4) { --h: 70%; } .interface-chart span:nth-child(5) { --h: 91%; } .interface-chart i { position: absolute; left: 9px; top: 78px; width: 82%; height: 1px; background: var(--lime); transform: rotate(-21deg); transform-origin: left; box-shadow: 0 0 10px var(--lime); } .interface-bottom { position: absolute; z-index: 1; left: 38px; right: 38px; bottom: 18px; display: flex; justify-content: space-between; align-items: center; } .interface-bottom p { margin: 0; color: #8fb8a2; font: 400 .51rem/1.5 var(--mono); letter-spacing: .08em; } .tiny-ring { display: grid; place-items: center; width: 25px; height: 25px; border: 1px solid var(--lime); border-radius: 50%; color: var(--lime); font-size: .75rem; } .floating-card { position: absolute; z-index: 2; border: 1px solid rgba(189, 254, 212, .18); border-radius: var(--r-1); background: rgba(9, 31, 20, .8); box-shadow: 0 18px 38px rgba(0, 0, 0, .25); backdrop-filter: blur(16px); } .card-launch { left: 0; top: 311px; display: flex; align-items: center; gap: 11px; padding: 12px 15px; animation: float 5s ease-in-out -1.5s infinite; } .icon-box { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 5px; background: rgba(0, 191, 99, .13); color: var(--lime); } .floating-card small { display: block; color: #9dc0aa; font: 400 .52rem var(--mono); letter-spacing: .1em; } .floating-card strong { display: block; font-size: .75rem; line-height: 1.3; } .card-score { right: 0; bottom: 13px; min-width: 134px; padding: 12px 15px; animation: float 5.5s ease-in-out -.7s infinite; } .card-score strong { font-size: 1.45rem; color: var(--lime); letter-spacing: -.035em; } .card-score > span { display: block; color: var(--muted); font-size: .59rem; } .scroll-note { position: absolute; left: max(24px, calc((100% - 1180px) / 2)); bottom: 24px; display: flex; align-items: center; gap: 9px; color: var(--dim); font: 400 .6rem var(--mono); letter-spacing: .12em; } .scroll-note > span:first-child { display: block; width: 24px; height: 1px; background: var(--lime); } /* -------------------------------------------------------------------------- 7. Statement -------------------------------------------------------------------------- */ .statement { border-top: 1px solid rgba(233, 243, 237, .055); } .statement-grid { display: grid; grid-template-columns: 28% 1fr; gap: var(--s-7); } .statement h2 { max-width: 20ch; margin: 0; font-size: var(--fs-h2); font-weight: 700; letter-spacing: -.052em; line-height: 1.08; } .statement h2 + p { max-width: 60ch; margin: var(--s-6) 0 var(--s-6); color: var(--muted); font-size: 1.02rem; line-height: 1.72; } /* -------------------------------------------------------------------------- 8. Services list -------------------------------------------------------------------------- */ .service-list { border-top: 1px solid var(--line); } .service-row { position: relative; display: grid; grid-template-columns: 70px 1.35fr 1fr 30px; align-items: center; gap: var(--s-5); padding: 29px var(--s-3); border-bottom: 1px solid var(--line); transition: padding .35s var(--ease), background .35s; } .service-row::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 191, 99, .09), transparent 57%); opacity: 0; transition: opacity .35s; pointer-events: none; } .service-row:hover { padding-left: 23px; background: rgba(255, 255, 255, .02); } .service-row:hover::after { opacity: 1; } .service-index { position: relative; z-index: 1; color: var(--dim); font: 400 var(--fs-mono) var(--mono); } .service-row h3 { position: relative; z-index: 1; margin: 0; font-size: 1.32rem; font-weight: 700; letter-spacing: -.03em; } .service-row p { position: relative; z-index: 1; margin: 0; color: var(--muted); font-size: .86rem; line-height: 1.55; } .service-row:hover .row-arrow, .build-card:hover .row-arrow { background: var(--lime); border-color: var(--lime); color: #06180f; transform: rotate(45deg); } /* -------------------------------------------------------------------------- 9. Proof -------------------------------------------------------------------------- */ .proof { background: linear-gradient(180deg, transparent, rgba(0, 191, 99, .035) 50%, transparent); } .proof-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-9); align-items: center; } .proof-display { position: relative; min-height: 420px; padding-top: var(--s-5); } .proof-orbit { position: absolute; left: 50%; top: 52%; width: 360px; aspect-ratio: 1; transform: translate(-50%, -50%); border: 1px solid rgba(0, 191, 99, .22); border-radius: 50%; box-shadow: 0 0 0 55px rgba(0, 191, 99, .025), 0 0 0 110px rgba(0, 191, 99, .017); } .proof-orbit::after { content: ''; position: absolute; width: 31%; height: 31%; top: -5%; left: 55%; border: 1px solid var(--lime); border-radius: 50%; background: var(--night); } .proof-orbit span { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 15px var(--lime); } .proof-orbit span:nth-child(1) { top: 14%; left: 8%; } .proof-orbit span:nth-child(2) { bottom: 4%; right: 20%; width: 4px; height: 4px; } .proof-orbit span:nth-child(3) { right: 6%; top: 44%; width: 4px; height: 4px; } .big-numeral { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -39%); font-size: 12rem; line-height: 1; font-weight: 250; letter-spacing: -.2em; color: rgba(225, 255, 237, .9); } .proof-copy h2 { max-width: 18ch; margin: 0; font-size: var(--fs-h2); font-weight: 700; letter-spacing: -.05em; line-height: 1.06; } .proof-copy > p { max-width: 52ch; margin: var(--s-5) 0 var(--s-6); color: var(--muted); font-size: .98rem; line-height: 1.75; } .proof-copy dl { margin: 0; border-top: 1px solid var(--line); } .proof-copy dl > div { display: grid; grid-template-columns: 55px 1fr; gap: var(--s-3); padding: var(--s-4) 0; border-bottom: 1px solid var(--line); } .proof-copy dt { color: var(--lime); font: .64rem var(--mono); } .proof-copy dd { display: flex; flex-direction: column; gap: 2px; margin: 0; } .proof-copy dd strong { font-size: .9rem; } .proof-copy dd span { color: var(--muted); font-size: .78rem; } /* -------------------------------------------------------------------------- 10. "What we build" — replaces the placeholder portfolio -------------------------------------------------------------------------- */ .build-section { background: linear-gradient(180deg, transparent, rgba(0, 191, 99, .035) 48%, transparent); } .build-header { display: flex; align-items: end; justify-content: space-between; gap: var(--s-7); margin-bottom: var(--s-7); } .build-header > p { max-width: 34ch; margin: 0 0 var(--s-1); color: var(--muted); font-size: .88rem; line-height: 1.72; } .build-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4); } .build-card { display: flex; flex-direction: column; padding: var(--s-6) var(--s-6) var(--s-5); border-radius: var(--r-2); transition: transform .35s var(--ease), border-color .35s var(--ease); } .build-card:hover { transform: translateY(-6px); border-color: rgba(0, 191, 99, .48); } .build-card .serial { color: var(--lime); font: 500 .58rem var(--mono); letter-spacing: .11em; } .build-card h3 { margin: var(--s-4) 0 var(--s-3); font-size: 1.2rem; font-weight: 700; letter-spacing: -.03em; } .build-card > p { margin: 0 0 var(--s-5); color: var(--muted); font-size: .86rem; line-height: 1.7; } .build-card ul { margin: 0 0 var(--s-5); padding: 0; list-style: none; display: grid; gap: 7px; } .build-card li { position: relative; padding-left: 18px; color: var(--ink-soft); font-size: var(--fs-xs); line-height: 1.5; } .build-card li::before { content: '→'; position: absolute; left: 0; color: var(--lime); } .build-card .build-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); margin-top: auto; padding-top: var(--s-4); border-top: 1px solid var(--line); color: var(--dim); font: 400 .62rem var(--mono); letter-spacing: .06em; } /* -------------------------------------------------------------------------- 11. Journal cards -------------------------------------------------------------------------- */ .journal-head { display: flex; align-items: end; justify-content: space-between; gap: var(--s-6); margin-bottom: var(--s-7); } .article-grid, .article-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4); } .article-card { border-radius: var(--r-2); overflow: hidden; transition: transform .35s var(--ease), border-color .35s; } .article-card:hover { transform: translateY(-6px); border-color: rgba(0, 191, 99, .46); } .article-card > a { display: block; padding-bottom: var(--s-5); } .article-visual { position: relative; height: 210px; overflow: hidden; border-bottom: 1px solid var(--line); } .visual-ai { display: grid; place-items: center; background: radial-gradient(circle at 43% 53%, rgba(0, 191, 99, .4), transparent 12%), repeating-linear-gradient(90deg, transparent 0 24px, rgba(181, 250, 208, .08) 25px), repeating-linear-gradient(0deg, transparent 0 24px, rgba(181, 250, 208, .08) 25px), #0b2318; } .visual-ai > span { position: relative; z-index: 1; color: #dffff0; font: 500 4.6rem var(--mono); letter-spacing: -.22em; } .visual-ai > i { position: absolute; width: 310px; height: 310px; border: 1px solid rgba(0, 191, 99, .35); border-radius: 46%; transform: rotate(45deg); } .visual-conversion { background: linear-gradient(135deg, #112c1f, #06170f); padding: var(--s-5); } .visual-conversion > span { position: absolute; left: 25px; top: 12px; color: rgba(220, 255, 236, .06); font: 500 7rem/.74 var(--mono); letter-spacing: -.13em; } .visual-conversion > i { position: absolute; bottom: 29px; width: 67px; height: 67px; border: 1px solid var(--lime); border-radius: 50%; box-shadow: inset 0 0 0 11px rgba(0, 191, 99, .12); } .visual-conversion > i:nth-of-type(1) { right: 27px; } .visual-conversion > i:nth-of-type(2) { right: 71px; bottom: 64px; width: 30px; height: 30px; } .visual-conversion > i:nth-of-type(3) { left: 48px; bottom: 30px; width: 17px; height: 17px; background: var(--lime); border: 0; } .visual-performance { display: flex; align-items: baseline; justify-content: center; padding-top: 48px; background: linear-gradient(120deg, #071b11, #0c2b1c); } .visual-performance > span { color: var(--lime); font: 600 6.6rem/.75 var(--mono); letter-spacing: -.18em; } .visual-performance > small { margin-left: 5px; color: var(--muted); font: .65rem var(--mono); } .visual-performance > i { position: absolute; bottom: 30px; color: #a9d3b8; font: .58rem var(--mono); font-style: normal; letter-spacing: .2em; } .visual-schema { display: grid; place-items: center; background: radial-gradient(circle at 50% 50%, rgba(0, 191, 99, .18), transparent 55%), linear-gradient(140deg, #0c2619, #06160f); } .visual-schema > span { position: relative; z-index: 1; color: #cdf6de; font: 500 2.6rem var(--mono); letter-spacing: -.12em; } .visual-schema > i { position: absolute; border: 1px solid rgba(0, 191, 99, .3); border-radius: 50%; } .visual-schema > i:nth-of-type(1) { width: 150px; height: 150px; } .visual-schema > i:nth-of-type(2) { width: 240px; height: 240px; border-color: rgba(0, 191, 99, .16); } .article-meta { display: flex; justify-content: space-between; align-items: center; margin: var(--s-5) var(--s-5) 10px; color: var(--lime); font: 500 .6rem var(--mono); letter-spacing: .08em; } .article-meta b { font-size: 1rem; } .article-card h3 { margin: 0 var(--s-5); color: var(--ink); font-size: 1.1rem; font-weight: 700; line-height: 1.35; letter-spacing: -.025em; } .article-card p.card-excerpt { margin: 10px var(--s-5) 0; color: var(--muted); font-size: var(--fs-xs); line-height: 1.65; } .mobile-link { display: none; margin-top: var(--s-6); } /* -------------------------------------------------------------------------- 12. FAQ -------------------------------------------------------------------------- */ .faq-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: var(--s-9); } .faq-list { border-top: 1px solid var(--line); } .faq-list details { border-bottom: 1px solid var(--line); overflow: clip; } .faq-list summary { display: flex; align-items: center; justify-content: space-between; gap: var(--s-5); min-height: 61px; padding: 19px 0; cursor: pointer; list-style: none; } .faq-list summary::-webkit-details-marker { display: none; } .faq-list summary > span:first-child { color: var(--ink); font-size: 1rem; font-weight: 650; line-height: 1.4; letter-spacing: -.02em; transition: color .25s var(--ease); } .faq-list summary > span:last-child { flex: 0 0 auto; display: grid; place-items: center; width: 27px; height: 27px; border: 1px solid rgba(0, 191, 99, .32); border-radius: 50%; background: var(--lime-wash); color: var(--lime); font: 400 1rem/1 var(--mono); transition: transform .28s var(--ease), background .28s var(--ease), border-color .28s var(--ease), color .28s var(--ease); } .faq-list summary:hover > span:first-child, .faq-list details[open] summary > span:first-child { color: var(--lime); } .faq-list summary:hover > span:last-child { border-color: rgba(0, 191, 99, .72); background: rgba(0, 191, 99, .12); } .faq-list details[open] summary > span:last-child { transform: rotate(45deg); background: var(--lime); border-color: var(--lime); color: #062012; } .faq-list details > div { padding-right: var(--s-7); animation: faq-answer-in .38s var(--ease) both; } .faq-list details p { margin: 0 0 var(--s-5); color: var(--muted); font-size: .88rem; line-height: 1.75; } /* -------------------------------------------------------------------------- 13. Contact & form -------------------------------------------------------------------------- */ .contact { position: relative; overflow: hidden; padding: var(--section-y) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .contact-glow { position: absolute; width: 770px; height: 430px; left: 50%; top: 40%; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(ellipse, rgba(0, 191, 99, .18), rgba(0, 191, 99, .04) 43%, transparent 68%); pointer-events: none; } .contact-inner { position: relative; display: grid; grid-template-columns: .95fr 1.05fr; gap: var(--s-9); align-items: start; } .contact h2 { max-width: 14ch; margin: 0; font-size: clamp(2.4rem, 4.4vw, 3.9rem); font-weight: 800; line-height: 1.02; letter-spacing: -.055em; } .contact-aside > p { max-width: 46ch; margin: var(--s-5) 0 var(--s-6); color: var(--muted); font-size: 1rem; line-height: 1.7; } .contact-facts { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--s-3); border-top: 1px solid var(--line); padding-top: var(--s-5); } .contact-facts li { display: flex; gap: var(--s-3); color: var(--muted); font-size: var(--fs-sm); } .contact-facts b { color: var(--dim); font: 400 var(--fs-mono) var(--mono); letter-spacing: .08em; min-width: 84px; } .contact-facts a { color: var(--ink); border-bottom: 1px solid var(--lime-edge); } .contact-facts a:hover { color: var(--lime); } /* Pages without the full form get a centred call-to-action band instead */ .contact-inner.cta-only { grid-template-columns: 1fr; max-width: 700px; margin-inline: auto; text-align: center; } .contact-inner.cta-only .eyebrow { justify-content: center; } .contact-inner.cta-only h2 { max-width: none; margin-inline: auto; } .contact-inner.cta-only p { margin-inline: auto; } .contact-inner.cta-only .contact-facts li { justify-content: center; } .contact-inner.cta-only .button { margin-top: var(--s-2); } .contact-form { padding: var(--s-6); border-radius: var(--r-3); } /* align-content:start stops the input stretching to fill the row when the neighbouring field is taller because it carries a .hint underneath. */ .field { display: grid; align-content: start; gap: 7px; margin-bottom: var(--s-4); } .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); } .field label { color: var(--dim); font: 500 var(--fs-mono) var(--mono); letter-spacing: .1em; text-transform: uppercase; } .field label .req { color: var(--lime); } .field input, .field select, .field textarea { width: 100%; padding: 13px 14px; border: 1px solid var(--line); border-radius: var(--r-1); background: rgba(4, 16, 10, .55); color: var(--ink); font: 400 .92rem var(--heading); transition: border-color .2s, background .2s; } .field textarea { min-height: 118px; resize: vertical; } .field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2300bf63' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 38px; } .field select option { background: var(--night-2); color: var(--ink); } .field input::placeholder, .field textarea::placeholder { color: #6d8177; } .field input:hover, .field select:hover, .field textarea:hover { border-color: var(--line-strong); } .field input:focus, .field select:focus, .field textarea:focus { border-color: var(--lime); background: rgba(4, 16, 10, .8); } /* :user-invalid only styles a field the visitor actually interacted with */ .field input:user-invalid, .field textarea:user-invalid { border-color: var(--danger); } .field input:user-invalid + .hint, .field textarea:user-invalid + .hint { color: var(--danger); } .hint { color: var(--dim); font-size: .72rem; } /* .form-consent, no .consent: el gestor de cookies declara su propio .consent mas abajo (linea ~1350) como capa fija a pantalla completa con fondo y blur. Al compartir nombre ganaba el ultimo por cascada y esta fila del formulario se convertia en una cortina sobre toda la pagina, con la casilla separada de su etiqueta. Los dos bloques son independientes: no volver a llamarlos igual. */ .form-consent { display: flex; gap: 10px; align-items: start; margin: var(--s-5) 0; } .form-consent input { flex: 0 0 auto; width: 17px; height: 17px; margin-top: 2px; accent-color: var(--lime); } .form-consent label { color: var(--muted); font-size: .76rem; line-height: 1.6; } .form-consent a { color: var(--ink); border-bottom: 1px solid var(--lime-edge); } .form-foot { display: flex; align-items: center; gap: var(--s-5); flex-wrap: wrap; } .form-foot small { color: var(--dim); font: 400 .68rem var(--mono); } .form-status { margin: var(--s-4) 0 0; font-size: var(--fs-sm); line-height: 1.6; } .form-status:empty { display: none; } .form-status[data-state="ok"] { color: var(--lime-bright); } .form-status[data-state="error"] { color: var(--danger); } /* Honeypot: bots fill it, humans never see it */ .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* -------------------------------------------------------------------------- 14. Footer -------------------------------------------------------------------------- */ .footer { padding: var(--s-7) 0 19px; } .footer-top { display: grid; grid-template-columns: 1fr 1.2fr 1fr; gap: var(--s-6); align-items: center; } .footer-top > p { max-width: 34ch; margin: 0; color: var(--muted); font-size: var(--fs-xs); line-height: 1.6; } .footer-links { display: flex; justify-content: flex-end; gap: 19px; flex-wrap: wrap; } .footer-links a { color: var(--muted); font-size: var(--fs-xs); } .footer-links a:hover { color: var(--lime); } .footer-bottom { display: flex; align-items: center; gap: var(--s-3); margin-top: var(--s-7); padding-top: 18px; border-top: 1px solid var(--line); color: var(--dim); font: 400 .64rem var(--mono); flex-wrap: wrap; } .footer-bottom > a:last-child { margin-left: auto; color: var(--lime); font-size: 1rem; } /* -------------------------------------------------------------------------- 15. Inner pages -------------------------------------------------------------------------- */ .page-hero { position: relative; padding: 170px 0 90px; overflow: hidden; } .page-hero::after { content: ''; position: absolute; z-index: -1; width: 580px; height: 360px; right: -90px; top: 25px; border-radius: 50%; background: radial-gradient(ellipse, rgba(0, 191, 99, .19), transparent 66%); } .page-hero h1 { max-width: 18ch; margin: 0; font-size: var(--fs-h1); font-weight: 800; letter-spacing: -.058em; line-height: .99; } .page-hero .lede { margin-bottom: 0; } .breadcrumb { display: flex; align-items: center; gap: 9px; margin: 0 0 var(--s-5); padding: 0; list-style: none; color: var(--dim); font: 400 var(--fs-mono) var(--mono); letter-spacing: .08em; flex-wrap: wrap; } .breadcrumb a { color: var(--dim); } .breadcrumb a:hover { color: var(--lime); } .breadcrumb li:not(:last-child)::after { content: '/'; margin-left: 9px; color: var(--lime); opacity: .5; } .breadcrumb [aria-current] { color: var(--muted); } .service-detail { display: grid; grid-template-columns: 110px 1fr 1fr; gap: var(--s-7); padding: var(--s-8) 0; border-top: 1px solid var(--line); scroll-margin-top: 100px; } .service-detail:last-of-type { border-bottom: 1px solid var(--line); } .detail-no { color: var(--lime); font: .7rem var(--mono); } .service-detail h2 { margin: 0; font-size: var(--fs-h3); font-weight: 750; letter-spacing: -.045em; line-height: 1.08; } .service-detail p { margin: 0; color: var(--muted); font-size: .93rem; line-height: 1.75; } .service-detail ul { margin: var(--s-5) 0 0; padding: 0; list-style: none; display: grid; gap: var(--s-2); } .service-detail li { color: var(--ink-soft); font-size: var(--fs-xs); } .service-detail li::before { content: '↗'; color: var(--lime); margin-right: 9px; } .detail-aside { margin-top: var(--s-5); padding-top: var(--s-4); border-top: 1px solid var(--line); color: var(--dim); font: 400 .68rem/1.7 var(--mono); } .process { background: rgba(0, 191, 99, .025); } .process-header { max-width: 40ch; } .process-header h2, .studio-story h2 { margin: 0; font-size: var(--fs-h2); font-weight: 750; letter-spacing: -.052em; line-height: 1.07; } .process-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: var(--s-7); } .step { border-top: 1px solid var(--lime); padding-top: 17px; } .step span { color: var(--dim); font: .64rem var(--mono); } .step h3 { margin: var(--s-5) 0 9px; font-size: 1.05rem; font-weight: 750; letter-spacing: -.025em; } .step p { margin: 0; color: var(--muted); font-size: .8rem; line-height: 1.65; } .studio-story { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-9); align-items: start; } .studio-story p { color: var(--muted); line-height: 1.8; } .principles { display: grid; border-top: 1px solid var(--line); } .principle { display: grid; grid-template-columns: 50px 1fr; gap: 10px; padding: 17px 0; border-bottom: 1px solid var(--line); } .principle span { color: var(--lime); font: .66rem var(--mono); } .principle strong { font-size: .94rem; } .principle p { grid-column: 2; margin: 2px 0 0; font-size: .8rem; } /* Blog index */ .blog-heading { padding-bottom: 70px; } .featured-article { display: grid; grid-template-columns: 1.17fr .83fr; border-radius: var(--r-2); overflow: hidden; } .featured-visual { position: relative; min-height: 340px; display: grid; place-items: center; overflow: hidden; background: radial-gradient(circle at 42% 48%, rgba(0, 191, 99, .45), transparent 7%), radial-gradient(circle at 58% 52%, rgba(0, 191, 99, .3), transparent 19%), #092217; } .featured-visual::before, .featured-visual::after { content: ''; position: absolute; border: 1px solid rgba(0, 191, 99, .33); border-radius: 50%; } .featured-visual::before { width: 290px; height: 290px; } .featured-visual::after { width: 460px; height: 460px; } .featured-visual span { position: relative; z-index: 1; color: rgba(224, 255, 237, .93); font: 500 5.4rem var(--mono); letter-spacing: -.22em; } .featured-copy { display: flex; flex-direction: column; align-items: flex-start; padding: var(--s-7) 39px; } .article-kicker { margin: 0; color: var(--lime); font: .62rem var(--mono); letter-spacing: .1em; } .featured-copy h2 { margin: 18px 0; color: var(--ink); font-size: var(--fs-h3); font-weight: 750; letter-spacing: -.045em; line-height: 1.08; } .featured-copy > p:not(.article-kicker) { margin: 0 0 var(--s-5); color: var(--muted); font-size: .88rem; line-height: 1.7; } .featured-copy .text-link { margin-top: auto; } /* Article page */ .article-page { padding: 150px 0 var(--section-y); } .article-shell { width: min(720px, calc(100% - 48px)); margin-inline: auto; } .article-head { margin-bottom: var(--s-7); } .article-head h1 { margin: var(--s-4) 0 var(--s-5); font-size: clamp(2.1rem, 4.2vw, 3.2rem); font-weight: 800; letter-spacing: -.05em; line-height: 1.05; } .article-standfirst { margin: 0 0 var(--s-6); color: var(--ink-soft); font-size: var(--fs-lead); line-height: 1.7; } .byline { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-4) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); color: var(--dim); font: 400 .68rem var(--mono); letter-spacing: .06em; flex-wrap: wrap; } .byline b { color: var(--muted); font-weight: 400; } .byline .sep { color: var(--lime); } .prose { color: var(--ink-soft); font-size: 1.04rem; line-height: 1.8; } .prose > * + * { margin-top: var(--s-5); } .prose h2 { margin-top: var(--s-8); font-size: clamp(1.55rem, 2.8vw, 2.1rem); font-weight: 750; letter-spacing: -.04em; line-height: 1.15; color: var(--ink); } .prose h3 { margin-top: var(--s-7); font-size: 1.22rem; font-weight: 700; letter-spacing: -.02em; color: var(--ink); } .prose strong { color: var(--ink); } .prose a { color: var(--lime); border-bottom: 1px solid var(--lime-edge); } .prose a:hover { border-bottom-color: var(--lime); } .prose code { padding: 2px 6px; border: 1px solid var(--line); border-radius: 5px; background: rgba(0, 191, 99, .07); color: var(--lime-bright); font: 400 .86em var(--mono); overflow-wrap: anywhere; } .prose ul, .prose ol { padding-left: var(--s-5); } .prose li + li { margin-top: 10px; } .prose li::marker { color: var(--lime); } .prose blockquote { margin-inline: 0; padding: var(--s-5) var(--s-6); border-left: 2px solid var(--lime); border-radius: 0 var(--r-1) var(--r-1) 0; background: var(--lime-wash); color: var(--ink); font-size: 1.06rem; line-height: 1.65; } .prose blockquote p { margin: 0; } /* Tables read well for humans and are easy for AI agents to extract */ .table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-2); } .prose table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); } .prose caption { padding: var(--s-3) var(--s-4); color: var(--dim); font: 400 var(--fs-mono) var(--mono); letter-spacing: .08em; text-align: left; } .prose th, .prose td { padding: 13px var(--s-4); text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; } .prose thead th { color: var(--lime); font: 500 var(--fs-mono) var(--mono); letter-spacing: .1em; text-transform: uppercase; } .prose tbody tr:last-child td { border-bottom: 0; } .prose tbody th { color: var(--ink); font-weight: 650; } .key-takeaway { margin: var(--s-7) 0; padding: var(--s-5) var(--s-6); border: 1px solid var(--lime-edge); border-radius: var(--r-2); background: var(--lime-wash); } .key-takeaway p:first-child { margin: 0 0 10px; color: var(--lime); font: 500 var(--fs-mono) var(--mono); letter-spacing: .12em; } .key-takeaway p:last-child { margin: 0; color: var(--ink); font-size: .98rem; line-height: 1.7; } /* Legal documents — long, densely numbered, need an index and tighter rhythm */ .legal-toc { margin-bottom: var(--s-8); padding: var(--s-5) var(--s-6); border: 1px solid var(--line); border-radius: var(--r-2); background: rgba(255, 255, 255, .02); } .legal-toc > p { margin: 0 0 var(--s-4); color: var(--lime); font: 500 var(--fs-mono) var(--mono); letter-spacing: .12em; } .legal-toc ol { margin: 0; padding: 0 0 0 var(--s-5); columns: 2; column-gap: var(--s-6); color: var(--dim); font-size: var(--fs-xs); line-height: 1.6; } .legal-toc li { margin-bottom: 5px; break-inside: avoid; } .legal-toc li::marker { color: var(--lime); font-family: var(--mono); font-size: .8em; } .legal-toc a { color: var(--muted); } .legal-toc a:hover { color: var(--lime); } .prose.legal { font-size: .98rem; line-height: 1.75; } .prose.legal > * + * { margin-top: var(--s-4); } .prose.legal h2 { margin-top: var(--s-7); scroll-margin-top: 100px; font-size: 1.24rem; font-weight: 700; letter-spacing: -.02em; } .prose.legal ul, .prose.legal ol { margin-top: var(--s-3); } .prose.legal li + li { margin-top: 4px; } .prose address { margin: var(--s-4) 0; padding: var(--s-4) var(--s-5); border-left: 2px solid var(--lime); background: var(--lime-wash); color: var(--ink); font-style: normal; line-height: 1.7; } .legal-end { margin-top: var(--s-8); padding-top: var(--s-5); border-top: 1px solid var(--line); color: var(--dim); font: 400 var(--fs-mono) var(--mono); letter-spacing: .12em; text-align: center; text-transform: uppercase; } @media (max-width: 760px) { .legal-toc ol { columns: 1; } .legal-toc { padding: var(--s-4) var(--s-5); } } .article-foot { margin-top: var(--s-8); padding-top: var(--s-6); border-top: 1px solid var(--line); } .related { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-4); margin-top: var(--s-5); } .related a { display: block; padding: var(--s-5); border: 1px solid var(--line); border-radius: var(--r-2); transition: border-color .25s, transform .25s var(--ease); } .related a:hover { border-color: var(--lime-edge); transform: translateY(-3px); } .related span { color: var(--lime); font: 500 .58rem var(--mono); letter-spacing: .1em; } .related strong { display: block; margin-top: 9px; font-size: .96rem; font-weight: 650; line-height: 1.4; letter-spacing: -.02em; } /* 404 */ .error-page { display: grid; place-items: center; min-height: 74vh; padding: 150px 0 var(--s-9); text-align: center; } .error-page h1 { font-size: clamp(3.5rem, 12vw, 8rem); letter-spacing: -.07em; line-height: 1; } .error-page p { max-width: 44ch; margin-inline: auto; color: var(--muted); } /* -------------------------------------------------------------------------- 15b. Cookie consent Only ever rendered when there is something to consent to. The three actions share one button row so accept and reject carry the same visual weight, which is what the AEPD requires and what dark patterns usually break. -------------------------------------------------------------------------- */ .consent { position: fixed; z-index: 20; inset: 0; display: grid; place-items: center; padding: var(--s-4); background: rgba(3, 10, 7, .72); backdrop-filter: blur(4px); animation: consent-in .25s var(--ease) both; } .consent--banner { place-items: end center; background: none; backdrop-filter: none; pointer-events: none; } .consent--banner .consent-panel { pointer-events: auto; max-width: 640px; } .consent-panel { width: min(560px, 100%); max-height: calc(100vh - var(--s-7)); overflow-y: auto; padding: var(--s-6); border: 1px solid var(--line-strong); border-radius: var(--r-3); background: var(--night-2); box-shadow: 0 26px 70px rgba(0, 0, 0, .5); } .consent-panel h2 { margin: 0 0 var(--s-3); font-size: 1.2rem; font-weight: 700; letter-spacing: -.025em; } .consent-panel p { margin: 0 0 var(--s-4); color: var(--muted); font-size: var(--fs-sm); line-height: 1.65; } .consent-panel a { color: var(--lime); border-bottom: 1px solid var(--lime-edge); } .consent-list { margin: 0 0 var(--s-5); padding: 0; list-style: none; display: grid; gap: var(--s-3); } .consent-list label { display: flex; gap: 11px; align-items: start; cursor: pointer; } .consent-list input { flex: 0 0 auto; width: 17px; height: 17px; margin-top: 3px; accent-color: var(--lime); } .consent-list span { color: var(--muted); font-size: var(--fs-xs); line-height: 1.6; } .consent-list strong { display: block; color: var(--ink); font-size: var(--fs-sm); margin-bottom: 2px; } .consent-actions { display: flex; gap: var(--s-3); flex-wrap: wrap; } .consent-actions .button { flex: 1 1 auto; justify-content: center; gap: 0; padding: 12px 18px; font-size: var(--fs-sm); } @keyframes consent-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } @media (max-width: 480px) { .consent-actions { flex-direction: column; } .consent-panel { padding: var(--s-5); } } /* -------------------------------------------------------------------------- 16. Animations -------------------------------------------------------------------------- */ @keyframes float { 50% { transform: translateY(-11px) rotate(5deg); } } @keyframes status { 50% { box-shadow: 0 0 0 9px rgba(0, 191, 99, .04), 0 0 22px var(--lime); } } @keyframes faq-answer-in { from { opacity: 0; transform: translateY(-7px); } to { opacity: 1; transform: none; } } /* -------------------------------------------------------------------------- 17. Responsive -------------------------------------------------------------------------- */ @media (max-width: 980px) { .nav-panel { gap: 0; } .nav-panel > a { padding: 8px 9px; } .hero-art { transform: scale(.84); transform-origin: center right; margin-left: -48px; } .proof-grid, .studio-story, .faq-grid, .contact-inner { gap: var(--s-8); } .service-detail { gap: var(--s-6); } .build-grid { grid-template-columns: repeat(2, 1fr); } .footer-top { grid-template-columns: 1fr 1fr; } .footer-links { grid-column: 1 / -1; justify-content: flex-start; } .process-grid { grid-template-columns: repeat(2, 1fr); row-gap: 33px; } } @media (max-width: 760px) { .container { width: min(100% - 36px, 1180px); } .site-header { padding: 14px 0; } .nav { gap: 13px; } .nav-panel { position: absolute; top: 52px; right: 0; display: none; flex-direction: column; align-items: stretch; width: min(290px, calc(100vw - 36px)); padding: 14px; border: 1px solid var(--line); border-radius: var(--r-1); background: rgba(5, 20, 13, .97); backdrop-filter: blur(18px); } .nav-panel.open { display: flex; } .nav-panel > a { padding: 11px 13px; } .nav-panel .nav-cta { margin: 5px 0 0; text-align: center; } .menu-toggle { display: grid; gap: 5px; width: 28px; padding: 7px 0; border: 0; background: transparent; cursor: pointer; } .menu-toggle span { display: block; width: 23px; height: 1px; background: var(--ink); transition: .25s; } .menu-toggle.open span:first-child { transform: translateY(3px) rotate(45deg); } .menu-toggle.open span:last-child { transform: translateY(-3px) rotate(-45deg); } .hero { min-height: auto; padding: 117px 0 70px; } .hero-layout { min-height: 0; display: block; } .hero-copy { padding: 0; } .hero-copy h1 { font-size: clamp(3rem, 14vw, 4.6rem); max-width: none; } .hero-art { height: 360px; width: 135%; transform: scale(.74); transform-origin: center left; margin: 12px 0 -43px -15px; } .scroll-note { display: none; } .statement-grid, .proof-grid, .faq-grid, .studio-story, .contact-inner { grid-template-columns: 1fr; gap: var(--s-5); } .section-heading, .journal-head, .build-header { display: block; margin-bottom: var(--s-6); } .build-header > p { margin-top: 19px; } .service-row { grid-template-columns: 38px 1fr 25px; gap: 11px; padding: 21px 3px; } .service-row p { grid-column: 2 / 4; } .service-row h3 { font-size: 1.09rem; } .row-arrow { grid-column: 3; grid-row: 1; } .proof-display { min-height: 320px; } .proof-orbit { transform: translate(-50%, -50%) scale(.72); } .big-numeral { font-size: 9rem; } .build-grid, .article-grid, .article-list, .related { grid-template-columns: 1fr; } .desktop-link { display: none; } .mobile-link { display: inline-flex; } .article-visual { height: 190px; } .contact-inner { gap: var(--s-7); } .contact-form { padding: var(--s-5); } .footer-top { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; } .page-hero { padding: 132px 0 64px; } .page-hero h1 { font-size: clamp(2.6rem, 12vw, 4rem); } .service-detail { grid-template-columns: 1fr; gap: var(--s-4); padding: var(--s-7) 0; } .process-grid { grid-template-columns: 1fr 1fr; margin-top: var(--s-6); } .featured-article { grid-template-columns: 1fr; } .featured-visual { min-height: 230px; } .featured-copy { padding: var(--s-6) var(--s-5); } .article-page { padding-top: 122px; } .article-shell { width: min(100% - 36px, 720px); } .prose { font-size: 1rem; } } @media (max-width: 420px) { .hero-actions { flex-direction: column; align-items: flex-start; gap: var(--s-4); } .hero-art { transform: scale(.64); margin-bottom: -78px; } .process-grid, .field-row { grid-template-columns: 1fr; } .footer-bottom { gap: 7px; } .footer-bottom > a:last-child { display: none; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } .reveal { opacity: 1; transform: none; } } @media print { .site-header, .noise, .hero-art, .contact, .footer, .aurora, .scroll-note { display: none; } body, html { background: #fff; color: #000; } .prose, .prose h2, .prose strong { color: #000; } }