/* braitengroup.com v2 — see README.md. Treatments marked 'verbatim' are copied from ../braitengroup-site/styles.css and must be kept in sync with it. */ :root{--ink:#061217;--paper:#EFEBE1;--blue:#3BB2EB;--sky:#D8F0FB;--flax:#F3DD81;--grey:#636363; --serif:"Hedvig Letters Serif",Georgia,serif;--sans:"Inter",-apple-system,sans-serif; --edge:24px;--col:1080px;--ease:cubic-bezier(0.22, 1, 0.36, 1); /* Liquid Glass — the material, ported verbatim from braiten.app (styles.css v=116) so both sites read as one substance. Do not retune these here. */ --g-blur:22px;--g-sat:180%;--g-tint:rgba(255,255,255,.55);--g-rim:rgba(255,255,255,.92)} *{box-sizing:border-box} /* anchor scrolling — same treatment as the live site (scroll-behavior:smooth + scroll-padding-top so targets clear the sticky header). The live value is 96px for its taller header; v2's measures 62px, so 78px keeps the same ~16px of air above the heading instead of leaving a gap. */ html{scroll-behavior:smooth;scroll-padding-top:78px} body{margin:0;background:#fff;color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased} .col{max-width:var(--col);margin:0 auto;padding:0 var(--edge)} /* ---- header: iOS 26 Liquid Glass, as one joined capsule ------------------- Until 2026-08-19 this was a frosted SLAB — rgba(255,255,255,.82) + blur(16px) from pixel zero, deepening on scroll. That is Apple's 2013-2024 language (UIBlurEffect on a chrome bar). In iOS 26 the slab went away and the controls became the glass, so the bar itself now paints nothing and .hdr is the object. Three arrangements were built and compared at true size in _mockups/ — a lockup capsule + a nav capsule, every control on its own glass, and this one, the two joined. The user chose JOINED on 2026-08-19: two capsules of equal weight read as a matched pair, and one object is calmer. Claude's recommendation was the grouped pair and the trade was stated (a capsule spanning the column is a bar with rounded ends, and its blur is a full-width repaint); the user picked this with that on the table. Do not re-litigate. HEIGHT IS LOAD-BEARING: 8 + 46 + 8 = 62px, exactly what the slab measured. The header is sticky, so it stays in flow — change this and every pixel below moves, and scroll-padding-top:78px (derived from this 62) stops being right. */ header{position:sticky;top:0;z-index:20;padding-block:8px} .hdr{display:flex;align-items:center;justify-content:space-between; position:relative; /* .hdr is also .col, so its padding box IS the column's OUTER box — 24px wider each side than the text column everything below aligns to. Pulling the width in by 2x --edge and re-centring puts the glass edge exactly on that column: 124->1156 at 1280, 24->416 at 440. */ width:calc(100% - 2 * var(--edge)); max-width:calc(var(--col) - 2 * var(--edge)); margin-inline:auto; padding:6px 6px 6px 16px; border-radius:999px; transition:background-color .4s var(--ease), box-shadow .4s var(--ease)} header img{height:34px;display:block} .nav{display:flex;gap:16px;align-items:center;font-size:13.5px;color:var(--grey)} .nav a{color:inherit;text-decoration:none} /* language switcher — tap treatment lifted verbatim from braiten.app, which solved this first. The box is 44x44 (the accessibility tap target) around an 18px glyph and has no radius, so WebKit's default `-webkit-tap-highlight-color: rgba(0,0,0,.18)` flashed a hard-edged square more than twice the icon's size when pressed — it read as a rendering artefact, not as feedback. Suppressed here and replaced by :active below, so touch still confirms the tap. Colour stays --grey (matching the footer tagline) rather than braiten.app's rgba(6,18,23,.42). */ .lang { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: -13px; color: var(--grey); -webkit-tap-highlight-color: transparent; /* the SLOW half of the tap feedback — the fade OUT, back to grey once the finger lifts. Hover-out takes this .9s too; that is deliberate on braiten.app and carried over here. */ transition: color .9s var(--ease); } /* hover keeps the original quick fade IN */ .lang:hover { color: var(--ink); transition: color .25s var(--ease); } /* press goes to black almost instantly, then the base rule fades it back. :active — not :hover — because Safari fires :hover on tap and then leaves it stuck on the element afterwards. */ .lang:active { color: #000; transition: color .08s var(--ease); } .lang svg { width: 18px; height: 18px; display: block; } /* Contact keeps its solid sky pill — it is the one opaque accent, and an accent turned to glass inside glass disappears. Fixed height so it sits 6px inside the capsule at both ends, the way Tahoe nests a button in a toolbar group. */ .nav .cta{color:var(--ink);font-weight:500;background:var(--sky);border-radius:999px; display:inline-flex;align-items:center;height:34px;padding:0 16px} /* mobile: drop the section links, same as the live site — they overflowed the bar */ @media (max-width:899px){ .nav a:not(.cta):not(.lang){display:none} } /* ---- bands: full-bleed colour, content in a column ---- */ .band{padding:72px 0} .b-paper{background:var(--paper)} .b-white{background:#fff} .b-sky{background:var(--sky)} .lab{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--grey);display:block;margin-bottom:16px} h1{font-family:var(--serif);font-weight:400;font-size:30px;line-height:1.12;letter-spacing:-.018em;margin:0} h2{font-family:var(--serif);font-weight:400;font-size:30px;line-height:1.12;letter-spacing:-.018em;margin:0 0 14px} p{font-size:15px;line-height:1.6;color:var(--grey);margin:0;max-width:52ch} .accent{color:var(--blue)} .go{display:inline-block;margin-top:18px;font-size:14px;font-weight:600;color:var(--ink); text-decoration:none;border-bottom:2px solid var(--flax);padding-bottom:2px} /* hero band holds the constellation behind the type */ .hero{position:relative;overflow:hidden;padding:76px 0 92px} .hero canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0} .hero .col{position:relative;z-index:1} .prod{display:flex;gap:16px;align-items:flex-start;margin-top:30px} .prod img{width:52px;height:52px;flex:none} .prod .n{font-family:var(--serif);font-size:22px;line-height:1.1} .prod .c{font-size:12.5px;color:var(--grey);margin-top:3px} .prod .d{font-size:14.5px;line-height:1.5;color:var(--grey);margin-top:9px;max-width:44ch} .ph{width:52px;height:52px;border:1px dashed rgba(6,18,23,.28);border-radius:15px;flex:none} .soon{opacity:.55} footer{background:#fff;padding:64px 0 44px} /* tagline sits at --grey, matching the footer labels — same as the live site */ footer .t{font-family:var(--serif);font-size:21px;margin:18px 0 0;color:var(--grey)} .mail{display:inline-block;margin-top:14px;font-size:15px;color:var(--ink);text-decoration:none; border-bottom:2px solid var(--flax);padding-bottom:2px} .cols{display:flex;gap:44px;margin-top:36px;font-size:14px} .cols div{display:flex;flex-direction:column;gap:9px} .cols b{font-weight:500;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--grey)} .cols a{color:var(--ink);text-decoration:none} .fine{margin-top:38px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#a0a0a6; display:flex;justify-content:space-between} /* ---- hero line cascade — CSS lifted verbatim from the live site ---- */ .kinetic .line { display: block; } .kinetic .line > span { display: block; } .js .hero__title .line > span { opacity: 0; transform: translateY(14px); transition: opacity 2.2s cubic-bezier(0.33, 0, 0.15, 1), transform 2.2s cubic-bezier(0.33, 0, 0.15, 1); will-change: opacity, transform; } .js .hero__title .line:nth-child(1) > span { transition-delay: 0s; } .js .hero__title .line:nth-child(2) > span { transition-delay: .4s; } .js .hero__title .line:nth-child(3) > span { transition-delay: .8s; } .js .hero__title .line:nth-child(4) > span { transition-delay: 1.2s; } .js .hero__title.is-shown .line > span { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} .js .hero__title .line > span { opacity:1 !important; transform:none !important; transition:none; } } /* ---- logo shadows: the exact values from the live site, not re-invented ---- lockups render at 26px so they take the smaller pair; the Braiten mark in the family band is 52px and takes the card pair. */ header img, footer img{ filter: drop-shadow(0 1px 2px rgba(20,21,26,.13)) drop-shadow(0 4px 8px rgba(20,21,26,.22));} .prod img{ filter: drop-shadow(0 2px 4px rgba(20,21,26,.13)) drop-shadow(0 8px 16px rgba(20,21,26,.22));} /* ---- braiten.app's onboarding orbit — CSS lifted verbatim from the live site ---- */ .ra__stage { position: relative; z-index: 2; filter: drop-shadow(0 4px 12px rgba(20,21,26,.07)) drop-shadow(0 30px 58px rgba(20,21,26,.20)); } .ra__app { position: relative; border-radius: 46px; overflow: hidden; background: radial-gradient(135% 120% at 50% 20%, #F8E9A2 0%, var(--flax) 56%); display: grid; place-items: center; padding: clamp(26px,5vw,44px); } @supports (corner-shape: superellipse(1.8)) { .ra__app { corner-shape: superellipse(1.8); } } .orbit { position: relative; aspect-ratio: 1/1; width: 100%; max-width: 460px; margin: 0 auto; display: grid; place-items: center; container-type: inline-size; } .orbit__rings { position: absolute; inset: 0; display: grid; place-items: center; } .ring { position: absolute; border: 1.5px solid rgba(255,255,255,.55); border-radius: 41%; } .ring--1 { width: 32%; height: 32%; border-color: rgba(255,255,255,.70); } .ring--2 { width: 59%; height: 59%; border-color: rgba(255,255,255,.55); } .ring--3 { width: 85%; height: 85%; border-color: rgba(255,255,255,.40); } .orbit__core { position: relative; z-index: 2; width: 64px; height: 64px; border-radius: 24px; background: var(--blue); display: grid; place-items: center; box-shadow: 0 6px 10px -2px rgba(6, 18, 23, .30); animation: corePulse 3.4s ease-in-out infinite; } .orbit__core svg { width: 40px; height: 40px; } .orbit__core::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 6px 10px -2px rgba(6, 18, 23, .20); opacity: 0; pointer-events: none; animation: coreGlow 3.4s ease-in-out infinite; } /* The radar halo (a pale-blue square pinging out to 2.375x every 3.4s) was REMOVED to match braiten.app and the iOS onboarding, neither of which pings — the core simply breathes. Its markup (``) went with it, and so did @keyframes corePing. z-index 1 is now unused between the rings and the core. */ .planet { position: absolute; top: 50%; left: 50%; width: 0; height: 0; z-index: 3; animation: orbitspin var(--dur,30s) linear infinite; animation-delay: var(--delay,0s); } .planet img { position: absolute; max-width: none; width: clamp(50px,14cqi,64px); height: clamp(50px,14cqi,64px); border-radius: 38%; object-fit: cover; transform: translate(-50%,-50%); box-shadow: 0 6px 8px rgba(6, 18, 23, .30); border: 1.5px solid #fff; } @keyframes orbitspin { from { transform: rotate(0deg) translateX(var(--r)) rotate(0deg); } to { transform: rotate(360deg) translateX(var(--r)) rotate(-360deg); } } @keyframes corePulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.08); } } @keyframes coreGlow { 0%,100% { opacity: 0; } 50% { opacity: 1; } } .ra__stage{max-width:420px;margin:36px auto 0} @media (min-width:900px){ .ra__stage{margin:0} } /* ---------------- mobile: everything centred, as the live site reads ---------------- */ @media (max-width:899px){ .band,.hero,footer{text-align:center} p{margin-left:auto;margin-right:auto} .prod{flex-direction:column;align-items:center;gap:14px} .prod .d{margin-left:auto;margin-right:auto} .cols{justify-content:center;gap:34px;text-align:center} .cols div{align-items:center} .fine{flex-direction:column;gap:8px;align-items:center} footer img{margin-left:auto;margin-right:auto} } /* ---------------- desktop: the band stays full-bleed, the content becomes two columns ---------------- */ @media (min-width:900px){ .band{padding:112px 0} .hero{padding:132px 0 148px} h1{font-size:40px;letter-spacing:-.02em} h2{font-size:40px} p{font-size:16.5px} .split{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:64px;align-items:start} .split--mid{align-items:center} .split--top h2{margin-bottom:0} .split .lab{margin-bottom:14px} .prod{margin-top:0} .stack{display:flex;flex-direction:column;gap:34px} .fine{margin-top:52px} } /* ============================================================================ Treatments carried over from the live site (../braitengroup-site/styles.css). Copied verbatim — keep in sync, do not re-invent. ========================================================================== */ /* --- pencil-stroke underline under in section titles --- soft at the left, firm at the right, with a hand-drawn bow. The bow CRESTS (∩) because a wrist pivot does; an earlier version sagged (∪) and read backwards. Never redraw the path. */ h2 em { font-style: normal; position: relative; white-space: nowrap; } h2 em::after { content: ""; position: absolute; left: -.02em; right: -.02em; bottom: -.1em; height: .38em; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 22' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%23F3DD81' stop-opacity='.26'/%3E%3Cstop offset='.3' stop-color='%23F3DD81' stop-opacity='.66'/%3E%3Cstop offset='.62' stop-color='%23F3DD81' stop-opacity='.92'/%3E%3Cstop offset='1' stop-color='%23F3DD81' stop-opacity='1'/%3E%3C/linearGradient%3E%3Cfilter id='r' filterUnits='userSpaceOnUse' x='-8' y='-8' width='216' height='38'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72 0.5' numOctaves='4' seed='11' result='n'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='n' scale='3.6' xChannelSelector='R' yChannelSelector='G'/%3E%3C/filter%3E%3C/defs%3E%3Cpath d='M3,13.2 C46,8.2 96,5.6 140,5.4 C166,5.3 184,5.8 197,6.4 L197,11.2 C184,10.5 166,10.1 140,10.2 C96,10.4 46,13.2 3,16.4 Z' fill='url(%23g)' filter='url(%23r)'/%3E%3C/svg%3E"); background-size: 100% 100%; background-repeat: no-repeat; transform: rotate(-.6deg); } /* --- footer email: ink type on a yellow rule, blue on hover --- */ .mail { transition: color .25s var(--ease); } .mail:hover { color: var(--blue); } /* --- the capsule materialises once the page moves --- (The `.site-header {}` rule that used to sit here matched nothing — v2's header is a bare
with no class — so its transition never applied. Removed.) */ header.is-stuck .hdr { background: var(--g-tint); -webkit-backdrop-filter: blur(var(--g-blur)) saturate(var(--g-sat)); backdrop-filter: blur(var(--g-blur)) saturate(var(--g-sat)); box-shadow: inset 0 1px 0 rgba(255,255,255,.85), 0 6px 18px -10px rgba(6,18,23,.22), 0 18px 36px -24px rgba(6,18,23,.26); } /* The rim is what reads as glass — not the blur. Light bends at the bevel and leaves a bright hairline, strongest where it lands and fading round the back. A flat `border` cannot vary along its length, so this paints a 1px padding ring filled with a directional gradient and masks it so only the ring lives. */ header.is-stuck .hdr::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; padding: 1px; background: linear-gradient(145deg, var(--g-rim) 0%, rgba(255,255,255,.18) 34%, rgba(255,255,255,.06) 58%, rgba(255,255,255,.70) 100%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; } /* Fallbacks. Not optional — without them the capsule is invisible type on a moving background wherever the material cannot be drawn. */ @supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { header.is-stuck .hdr { background: rgba(255,255,255,.94); } } /* iOS/macOS "Reduce transparency" — the material must collapse to a solid */ @media (prefers-reduced-transparency: reduce) { header.is-stuck .hdr { background: rgba(255,255,255,.96); -webkit-backdrop-filter: none; backdrop-filter: none; } } /* --- keyboard focus, same as the live site --- */ a:focus-visible, button:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 4px; } .cta:focus-visible { border-radius: 999px; } .lang:focus-visible { outline-offset: 0; border-radius: 10px; } /* 10px, as on braiten.app — the box is square, not round */