/* Copied from previews/2026-09-offer/preview.css for the root-level offer pages; asset paths rewritten to the site root. The preview folder keeps its own copy. */ /* DNDB offer page, 2026-09, v3. STRATEGY PREVIEW ONLY, NOT PRODUCTION. ===================================================================== v2 was built on invented values and only resembled the site from a distance. v3 is built from measured computed styles taken off the live index.html at 1512px, then checked back against the source rules. What was wrong before, and what it actually is: - buttons were h52 / radius 26 / flat navy. The real ones are h36 / radius 10 / #0d0d16 with an animated conic-gradient border. - the nav pill was radius 32 / blur 18 / near-opaque white. The real one is radius 16 / blur 36 saturate 140% / 8% white over the page. - cards were solid white with a 1px hairline. The site has almost no solid surfaces: things are transparent at rest and go to rgba(255,255,255,.7) with a large directional shadow when raised. - the watermark was an 800-weight word at 3.5% opacity. The real one is 900 weight in the --wmc token with a six-layer text-shadow. - body copy was Inter 15/24. The site sets Roboto 14/22 in --m1. ===================================================================== */ /* ── Fonts, same four files and unicode ranges as index.html ──────────── */ @font-face { font-family:'Inter'; font-style:normal; font-weight:300 700; font-display:swap; src:url('/assets/fonts/inter-latin.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family:'Inter'; font-style:normal; font-weight:300 700; font-display:swap; src:url('/assets/fonts/inter-latin-ext.woff2') format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } @font-face { font-family:'Roboto'; font-style:normal; font-weight:400 700; font-display:swap; src:url('/assets/fonts/roboto-latin.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family:'Roboto'; font-style:normal; font-weight:400 700; font-display:swap; src:url('/assets/fonts/roboto-latin-ext.woff2') format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } *, *::before, *::after { box-sizing:border-box; margin:0; padding:0; } /* ── Tokens, copied verbatim from index.html :root and [data-theme] ───── */ :root { --bg:#F0F1F5; --dark:#1C2B4A; --muted:#8892A4; --t1:#222331; --t2:#1C2331; --t3:#212331; --t4:#2D3039; --m1:#6A6D7C; --m2:#5D6483; --m3:#60638A; --m4:#9EA1AD; --m5:#676C97; --m6:#B5C1E8; --c1:#F1F0F4; --c2:#F3F4F7; --c3:#D6DDE4; --c4:#C8D2DA; --wmc:#EEEFF3; --accent-mark:#5D8FA2; --sys:-apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', sans-serif; /* The raised-surface shadow from .svc-card:hover / .svc-card.active. Directional, thrown down and to the left. The site's one card shadow. */ --raise: -173.226px 154.326px 172px rgba(72,63,86,0.16), -101.996px 90.867px 89.715px rgba(72,63,86,0.1157), -52.384px 46.668px 42.106px rgba(72,63,86,0.0899), -21.064px 18.766px 18.438px rgba(72,63,86,0.0701), -4.712px 4.198px 7.981px rgba(72,63,86,0.0443); } [data-theme="dark"] { --bg:#14151F; --dark:#EDEFF5; --muted:#9AA0B8; --t1:#EDEFF5; --t2:#EDEFF5; --t3:#EDEFF5; --t4:#EDEFF5; --m1:#AEB3C8; --m2:#AEB3C8; --m3:#AEB3C8; --m4:#9096AC; --m5:#9AA0C8; --m6:#C7CEEE; --c1:#242534; --c2:#1D1E2B; --c3:#33354A; --c4:#3A3C52; --wmc:#1B1C29; --raise: -173.226px 154.326px 172px rgba(0,0,0,0.40), -101.996px 90.867px 89.715px rgba(0,0,0,0.28), -52.384px 46.668px 42.106px rgba(0,0,0,0.20), -21.064px 18.766px 18.438px rgba(0,0,0,0.16), -4.712px 4.198px 7.981px rgba(0,0,0,0.10); } html { scroll-behavior:smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } } section[id] { scroll-margin-top:120px; } body { font-family:'Inter', sans-serif; background:var(--bg); color:var(--dark); overflow-x:hidden; -webkit-font-smoothing:antialiased; } /* The header is the home page's component and has to render like it. This file smooths the whole body with `antialiased`, which on macOS thins every stroke; index.html does not, so the same 400 weight, the same size and the same family came out visibly lighter here than on the page the header was copied from. Measured, not guessed: both compute font-weight 400 and the link measures 98px wide on either page, and the only difference between them was this property. So the header alone goes back to the platform default; the rest of the page keeps the smoothing it was designed with. */ .site-header, .site-header * { -webkit-font-smoothing:auto; } /* Loud on purpose: this file must never be mistaken for the live page. */ .pv-flag { position:fixed; left:0; right:0; bottom:0; z-index:200; background:#0d0d16; color:#fff; text-align:center; font-family:var(--sys); font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; padding:7px 12px; } /* ── Background wash, the hero blob palette, fixed under the scroll ───── */ .wash { position:fixed; inset:0; z-index:0; pointer-events:none; background: radial-gradient(820px 560px at 10% -8%, rgba(139,163,255,0.30), transparent 62%), radial-gradient(720px 540px at 94% 0%, rgba(126,214,223,0.26), transparent 62%), radial-gradient(640px 500px at 56% 44%, rgba(196,160,255,0.14), transparent 66%); } [data-theme="dark"] .wash { background: radial-gradient(820px 560px at 10% -8%, rgba(96,120,220,0.20), transparent 62%), radial-gradient(720px 540px at 94% 0%, rgba(70,160,175,0.16), transparent 62%), radial-gradient(640px 500px at 56% 44%, rgba(150,110,220,0.12), transparent 66%); } .page { position:relative; z-index:1; } /* .container on the live site is exactly 1200px with no side padding. The 24px here only keeps the page off the edge below 1248px. */ .wrap { width:1200px; max-width:100%; margin:0 auto; padding:0 24px; } /* ── Watermark, from .wm, values unchanged ────────────────────────────── */ .wm { position:absolute; pointer-events:none; user-select:none; font-family:var(--sys); font-weight:900; font-size:clamp(80px,14vw,240px); letter-spacing:-0.02em; text-transform:uppercase; line-height:1; color:var(--wmc); text-shadow: 0px 165px 216px rgba(154,170,187,0.07), 0px 107px 127px rgba(154,170,187,0.053), 0px 64px 69px rgba(154,170,187,0.043), 0px 33px 35px rgba(154,170,187,0.035), 0px 13px 18px rgba(154,170,187,0.027), 0px 3px 9px rgba(154,170,187,0.017); white-space:nowrap; z-index:0; } /* ── Header, from .nav-wrap and .nav-links li a ───────────────────────── */ .hd { position:sticky; top:0; z-index:60; padding:30px 0 0; } .pill { display:flex; flex-direction:row; justify-content:space-between; align-items:center; padding:0 24px; gap:60px; width:1200px; max-width:calc(100% - 48px); height:69px; margin:0 auto; border-radius:16px; background:linear-gradient(180deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.03) 100%); backdrop-filter:blur(36px) saturate(140%) brightness(1.05); -webkit-backdrop-filter:blur(36px) saturate(140%) brightness(1.05); box-shadow: 0 -1px 0 rgba(120,130,160,0.18) inset, 1px 0 0 rgba(255,255,255,0.4) inset, 0 6px 32px rgba(28,43,74,0.08), 0 1px 6px rgba(28,43,74,0.04); } .nav-left { display:flex; flex-direction:row; align-items:center; gap:60px; flex:none; } /* Scrolled state, from .site-header.scrolled .nav-wrap. The live site snaps between full screens, so its glass only ever has a hero or a section edge behind it. This page scrolls continuously, and at 12% white a gradient heading passing underneath shows straight through the pill, so the scrolled fill is raised until the header stays readable. It is the one value on this page that is deliberately not the site's, and it exists because the page scrolls where the site does not. */ .hd.scrolled .pill { background:linear-gradient(180deg, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.90) 100%); box-shadow: 0 -1px 0 rgba(120,130,160,0.18) inset, 1px 0 0 rgba(255,255,255,0.4) inset, 0 10px 44px rgba(28,43,74,0.12), 0 2px 10px rgba(28,43,74,0.06); } [data-theme="dark"] .hd.scrolled .pill { background:linear-gradient(180deg, rgba(20,22,34,0.86) 0%, rgba(20,22,34,0.76) 100%); } .logo img { height:30px; width:auto; display:block; } [data-theme="dark"] .logo img { filter:brightness(0) invert(1); } .nav { display:flex; list-style:none; } .nav a { display:flex; align-items:center; justify-content:center; padding:5px 18px; height:35px; border-radius:10px; font-family:var(--sys); font-weight:400; font-size:16px; letter-spacing:-0.01em; font-variant:all-small-caps; color:var(--m6); text-decoration:none; transition:background .2s, color .2s; white-space:nowrap; } .nav a:hover { background:rgba(181,193,232,0.12); color:#7A8EC8; } .nav a.on { background:rgba(181,193,232,0.18); color:var(--dark); font-weight:600; } [data-theme="dark"] .nav a.on { color:#EDEFF5; } .nav-right { display:flex; align-items:center; gap:14px; } /* The live header carries no theme switch, so neither does this page. The [data-theme="dark"] rules below stay dormant: nothing sets the attribute, so the page is light-only until a switch is added back. */ /* ── Buttons ────────────────────────────────────────────────────────────── The primary button is the site's shine button, copied from the shared rule covering .nav-cta / .h-cta / .about-btn / .svc-contact-btn / .qo-btn / .btn-outline / .contacts-submit-btn: a #0d0d16 fill in the padding box, an animated conic gradient in the border box, and two pseudo layers, a dotted texture behind a rotating mask and a soft rotating sheen. */ @property --gradient-angle { syntax:""; initial-value:0deg; inherits:false; } @property --gradient-angle-offset { syntax:""; initial-value:0deg; inherits:false; } @property --gradient-percent { syntax:""; initial-value:5%; inherits:false; } @property --gradient-shine { syntax:""; initial-value:white; inherits:false; } @keyframes gradient-angle { to { --gradient-angle:360deg; } } @keyframes shimmer { to { rotate:360deg; } } .btn { --sc-bg:#0d0d16; --sc-bg-subtle:#1a1818; --sc-hi:#67e8f9; --sc-hi-sub:#06b6d4; --sc-anim:gradient-angle linear infinite; --sc-dur:3s; display:flex; align-items:center; justify-content:center; height:36px; padding:8px 22px; border-radius:10px; flex-shrink:0; font-family:var(--sys); font-size:13px; font-weight:400; line-height:20px; letter-spacing:0.01em; text-decoration:none; text-align:center; cursor:pointer; isolation:isolate; position:relative; overflow:hidden; border:1px solid transparent; color:#fff; background: linear-gradient(var(--sc-bg), var(--sc-bg)) padding-box, conic-gradient( from calc(var(--gradient-angle) - var(--gradient-angle-offset)), transparent, var(--sc-hi) var(--gradient-percent), var(--gradient-shine) calc(var(--gradient-percent) * 2), var(--sc-hi) calc(var(--gradient-percent) * 3), transparent calc(var(--gradient-percent) * 4) ) border-box; box-shadow:inset 0 0 0 1px var(--sc-bg-subtle); transition: --gradient-angle-offset 800ms cubic-bezier(0.25,1,0.5,1), --gradient-percent 800ms cubic-bezier(0.25,1,0.5,1), --gradient-shine 800ms cubic-bezier(0.25,1,0.5,1), opacity .2s, transform .2s; animation:var(--sc-anim) var(--sc-dur); } .btn::before, .btn::after { content:""; pointer-events:none; position:absolute; left:50%; top:50%; translate:-50% -50%; z-index:-1; animation:var(--sc-anim) var(--sc-dur); } .btn::before { width:calc(100% - 6px); height:calc(100% - 6px); background:radial-gradient(circle at 2px 2px, #fff 0.5px, transparent 0) padding-box; background-size:4px 4px; background-repeat:space; mask-image:conic-gradient(from calc(var(--gradient-angle) + 45deg), black, transparent 10% 90%, black); border-radius:inherit; opacity:.4; } .btn::after { --sc-anim:shimmer linear infinite; width:100%; aspect-ratio:1; background:linear-gradient(-50deg, transparent, var(--sc-hi), transparent); mask-image:radial-gradient(circle at bottom, transparent 40%, black); opacity:.55; } .btn:hover { --gradient-percent:20%; --gradient-angle-offset:95deg; --gradient-shine:var(--sc-hi-sub); } /* The site kills these loops for reduced motion; so does this page. */ @media (prefers-reduced-motion: reduce) { .btn, .btn::before, .btn::after { animation:none; } } /* And on every phone and tablet, motion setting or not (Viktor, 2026-09-22): the shine repaints a conic gradient every frame and heats the device. */ @media (max-width:1024px) { .btn, .btn::before, .btn::after { animation:none !important; } } /* Hero-sized variant, from .h-cta: 40 tall, 26 sides, 14px type. */ .btn-lg { height:40px; padding:0 26px; font-size:14px; line-height:1.2; } /* Secondary button, from .qo-reviews-btn. */ .btn-2 { display:flex; align-items:center; justify-content:center; gap:10px; height:36px; padding:8px 18px; border-radius:10px; flex-shrink:0; background:linear-gradient(190.57deg, rgba(255,255,255,0.9) 19.25%, rgba(255,255,255,0.71) 54.39%, rgba(255,255,255,0.87) 90.02%); border:1px solid #F1F0F4; box-shadow:0px 22px 62px rgba(12,12,32,0.07), 0px 4.4px 10.075px rgba(12,12,32,0.035); font-family:var(--sys); font-size:13px; font-weight:400; line-height:20px; letter-spacing:0.01em; color:var(--t1); text-decoration:none; cursor:pointer; transition:transform .2s; } .btn-2:hover { transform:translateY(-1px); } [data-theme="dark"] .btn-2 { background:linear-gradient(190.57deg, rgba(255,255,255,0.08) 19.25%, rgba(255,255,255,0.05) 54.39%, rgba(255,255,255,0.08) 90.02%); border-color:var(--c3); box-shadow:0px 22px 62px rgba(0,0,0,0.28), 0px 4.4px 10.075px rgba(0,0,0,0.14); } .btn-lg.btn-2 { height:40px; padding:0 26px; font-size:14px; } .btn-row { display:flex; align-items:center; gap:16px; flex-wrap:wrap; } /* ── Type, from .section-title / .section-tagline / .h-title / body copy ─ */ .head-row { display:flex; flex-direction:row; align-items:flex-end; gap:9px; } .sec-title { font-family:var(--sys); font-size:44px; font-weight:800; line-height:80%; text-transform:uppercase; letter-spacing:0; background:linear-gradient(96.58deg, #71B5C9 -17.37%, var(--t1) 57.3%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; white-space:nowrap; } .tagline { font-family:var(--sys); font-size:18px; font-weight:300; font-style:italic; line-height:80%; color:var(--t1); white-space:nowrap; padding-bottom:2px; } /* .h-title on the live hero is 800 at -0.05em with a 0.9 line-height. Scaled down here because this page carries a sentence, not two words. */ .h1 { font-family:var(--sys); font-weight:800; font-size:56px; line-height:.9; letter-spacing:-0.05em; color:var(--t1); } .h1 .tint { background:linear-gradient(96.58deg, #71B5C9 -17.37%, var(--t1) 62%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; } .h3 { font-family:var(--sys); font-size:24px; font-weight:800; line-height:28px; letter-spacing:-0.02em; color:var(--t1); } /* .svc-card-name: the site's item label. Not uppercase. */ .k { font-family:var(--sys); font-size:14px; font-weight:600; line-height:18px; letter-spacing:-0.03em; color:var(--t4); } .k-lg { font-family:var(--sys); font-size:18px; font-weight:600; line-height:24px; letter-spacing:-0.02em; color:var(--t1); } /* Body copy is Roboto 14/22 in --m1 everywhere on the site. */ .body { font-family:'Roboto', sans-serif; font-size:14px; font-weight:400; line-height:22px; color:var(--m1); } .lede { font-family:'Roboto', sans-serif; font-size:16px; font-weight:400; line-height:26px; color:var(--m1); } .lede strong { color:var(--t1); font-weight:500; } /* .faq-q / .aws-step: the site's secondary heading tone. */ .q-lbl { font-family:'SF Pro Text', var(--sys); font-size:16px; font-weight:600; line-height:19px; color:var(--m3); } .meta { font-family:'Roboto', sans-serif; font-size:13px; line-height:20px; color:var(--m1); } .micro { font-family:var(--sys); font-size:11px; font-weight:600; line-height:16px; letter-spacing:.12em; text-transform:uppercase; color:var(--m4); } .eyebrow { display:inline-block; font-family:var(--sys); font-weight:600; font-size:13px; line-height:16px; letter-spacing:.16em; text-transform:uppercase; color:var(--m3); margin-bottom:18px; } /* Stops the last two or three words dropping onto a line of their own. */ .band-head .sub, .lede, .h1, .h1-sub, .k-lg, .sec-title + .tagline { text-wrap:balance; } .measure { max-width:62ch; } /* ── Surfaces ───────────────────────────────────────────────────────────── The live site has almost no solid panels. Elements are transparent at rest and become rgba(255,255,255,.7) with --raise when active. Anything needing a permanent surface uses the frosted panel from .svc-desc-panel: 20% white over 7.5px of blur, radius 20, no border. */ .panel { background:rgba(255,255,255,0.2); border-radius:20px; backdrop-filter:blur(7.5px); -webkit-backdrop-filter:blur(7.5px); } [data-theme="dark"] .panel { background:rgba(255,255,255,0.05); } .raised { background:rgba(255,255,255,0.7); border-radius:16px; box-shadow:var(--raise); } [data-theme="dark"] .raised { background:rgba(36,37,52,0.86); } /* Row item: transparent at rest, raised when active. The Services behaviour. */ .row-item { border-radius:16px; background:transparent; box-shadow:none; transition:background .2s, box-shadow .2s; } .row-item:hover { background:rgba(255,255,255,0.35); } [data-theme="dark"] .row-item:hover { background:rgba(255,255,255,0.05); } .row-item.on { background:rgba(255,255,255,0.7); box-shadow:var(--raise); } [data-theme="dark"] .row-item.on { background:rgba(36,37,52,0.86); } .rule { border:0; border-top:1px solid var(--c3); } /* ── Bands. The live sections carry 200px of top padding; a scrolling page does not need that between every band, so the rhythm is halved. ──── */ .band { position:relative; padding:100px 0; } .band-tight { padding:60px 0; } .band-head { margin-bottom:36px; } .band-head .sub { margin-top:16px; } /* ── Service icon tile, from .svc-card-icon, exact numbers ────────────── */ .ico { display:block; width:45px; height:45px; background:#fff; border-radius:9.97px; flex:none; overflow:hidden; position:relative; } .ico img { position:absolute; width:77px; height:77px; left:50%; top:50%; transform:translate(-50%,-50%); object-fit:cover; mix-blend-mode:darken; } .ico-lg { width:200px; height:200px; border-radius:20px; } .ico-lg img { width:340.37px; height:340.37px; left:-58.39px; top:-74.53px; transform:none; } /* ── Stars ────────────────────────────────────────────────────────────── */ .stars { display:inline-flex; gap:2px; vertical-align:-1px; } .stars svg { width:13px; height:13px; fill:#E8A33D; } /* Fractional rating (4.9, 4.8): the last star is filled to --fill, the same construction as .rv-star-part on the testimonials page. */ .stars .star-part .bg { fill:var(--c3); } .stars .star-part .fg { clip-path:inset(0 calc(100% - var(--fill)) 0 0); } .stars .score { margin-left:4px; font-family:var(--sys); font-size:12px; font-weight:600; line-height:13px; color:var(--t1); } /* ── Proof strip ──────────────────────────────────────────────────────── */ .proof { display:flex; flex-wrap:wrap; gap:36px; margin-top:40px; padding-top:24px; border-top:1px solid var(--c3); max-width:780px; } .proof-i { display:flex; flex-direction:column; gap:4px; } .proof-n { font-family:var(--sys); font-size:24px; font-weight:800; line-height:28px; letter-spacing:-0.02em; color:var(--t1); } .proof-l { font-family:'Roboto', sans-serif; font-size:12px; line-height:18px; color:var(--m1); max-width:24ch; } /* ── Check list, copied from the Offer screen (.qo-list / .qo-item / .qo-check). The tick is checkmark.svg at its native 13x10 inside a 32px box, with no circle behind it. ──────────────────────────────────────── */ .qo-list { list-style:none; display:flex; flex-direction:column; align-items:flex-start; gap:4px; padding:0 0 0 20px; margin:0; } .qo-item { display:flex; flex-direction:row; align-items:flex-start; gap:8px; font-family:'SF Pro Text', var(--sys); font-size:16px; line-height:19px; letter-spacing:0; font-variant:all-small-caps; color:var(--m3); text-wrap:balance; } .qo-check { flex-shrink:0; width:32px; height:32px; display:flex; align-items:center; justify-content:center; } .qo-check::after { content:''; display:block; width:13px; height:10px; background-image:url('/checkmark.svg'); background-size:contain; background-repeat:no-repeat; } /* ── NEW badge. Site geometry (10px radius, 11px label) in a single red, so it reads as a DNDB tag rather than a browser chip. ─────────────────── */ .badge-new { display:inline-flex; align-items:center; height:17px; padding:0 6px; margin-left:6px; border-radius:5px; background:#D6262B; color:#fff; font-family:var(--sys); font-size:10px; font-weight:700; line-height:1; letter-spacing:.1em; text-transform:uppercase; vertical-align:1px; } /* ── Text field. Same gradient, border, radius and type as .contacts-input and .qo-reviews-btn, sized to sit level with .btn-lg. ──────────────── */ .field { height:40px; padding:0 16px; border-radius:10px; background:linear-gradient(190.57deg, rgba(255,255,255,0.9) 19.25%, rgba(255,255,255,0.71) 54.39%, rgba(255,255,255,0.87) 90.02%); border:1px solid #F1F0F4; box-shadow:0px 22px 62px rgba(12,12,32,0.07), 0px 4.4px 10.075px rgba(12,12,32,0.035); font-family:'Roboto', sans-serif; font-size:13px; color:var(--t1); outline:none; } .field::placeholder { color:var(--m1); opacity:1; } .field:focus { border-color:var(--m6); } /* ── Note under a CTA, from .h-cta-note on the live hero ───────────────── Roboto 12/16 at 0.01em, centred on the button it belongs to. */ .cta-note { margin-top:10px; font-family:'Roboto', sans-serif; font-size:12px; line-height:16px; letter-spacing:0.01em; color:var(--m1); text-align:center; } .cta-stack { display:flex; flex-direction:column; align-items:stretch; }