/* ============================================================================= SmartMaison — Design system Domotique de luxe. Dark, warm, champagne gold, editorial typography. Contents 01. Tokens 02. Reset & base 03. Typography 04. Layout primitives 05. Buttons 06. Header, navigation, language switch 07. Hero 08. Editorial feature rows 09. Cards, panels, lists, steps, stats 10. CTA band 11. Footer 12. Page transition & scroll reveal 13. Error page 14. Responsive 15. Reduced motion & print ============================================================================= */ /* Fonts are linked from the document (with preconnect) rather than @import-ed here, so they are fetched in parallel with this stylesheet. */ /* ----------------------------------------------------------------------------- 01. Tokens -------------------------------------------------------------------------- */ :root { /* Ground — warm near-black rather than blue-grey */ --ink-950: #07080a; --ink-900: #0b0d10; --ink-850: #0f1217; --ink-800: #14181d; --ink-750: #1a1f26; --ink-700: #212730; /* Champagne gold */ --gold: #c9a962; --gold-light: #e7d3a1; --gold-pale: #f0e4c6; --gold-deep: #a8863f; --gold-grad: linear-gradient(118deg, #a8863f 0%, #e7d3a1 46%, #c9a962 100%); --gold-sheen: linear-gradient(90deg, transparent, rgba(240, 228, 198, .55), transparent); /* Text */ --ivory: #f7f3ea; --text: #cbc6bb; --text-dim: #928d83; --text-faint: #6a655d; /* Lines & surfaces */ --line: rgba(201, 169, 98, .18); --line-strong: rgba(201, 169, 98, .42); --line-soft: rgba(247, 243, 234, .07); --surface: linear-gradient(160deg, rgba(26, 31, 38, .72) 0%, rgba(15, 18, 23, .82) 100%); --glass: rgba(11, 13, 16, .72); /* Elevation */ --shadow-sm: 0 2px 10px rgba(0, 0, 0, .35); --shadow-md: 0 18px 44px -20px rgba(0, 0, 0, .75); --shadow-lg: 0 40px 90px -40px rgba(0, 0, 0, .9); --glow-gold: 0 0 70px -18px rgba(201, 169, 98, .35); /* Type */ --font-display: 'Cormorant Garamond', 'Times New Roman', Georgia, serif; --font-body: 'Outfit', 'Helvetica Neue', Arial, sans-serif; --fs-display: clamp(3.1rem, 1.6rem + 6.2vw, 7rem); --fs-h1: clamp(2.4rem, 1.5rem + 3.6vw, 4.2rem); --fs-h2: clamp(1.9rem, 1.3rem + 2.4vw, 3rem); --fs-h3: clamp(1.3rem, 1.1rem + 0.8vw, 1.7rem); --fs-lede: clamp(1.05rem, 1rem + 0.4vw, 1.28rem); --fs-body: 1.02rem; --fs-sm: 0.875rem; --fs-xs: 0.75rem; --tracking-eyebrow: 0.34em; --tracking-ui: 0.16em; /* Space */ --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.5rem; --s-6: 2rem; --s-7: 2.75rem; --s-8: 3.5rem; --s-9: 5rem; --s-10: 7rem; --s-11: clamp(4.5rem, 9vw, 9.5rem); /* Geometry */ --radius-xs: 2px; --radius-sm: 4px; --radius-md: 10px; --radius-lg: 18px; --radius-pill: 999px; --container: 1180px; --measure: 68ch; --header-h: 78px; /* Motion */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --t-fast: 0.2s var(--ease-out); --t-mid: 0.4s var(--ease-out); --t-slow: 0.7s var(--ease-out); } /* ----------------------------------------------------------------------------- 02. Reset & base -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 1.5rem); -webkit-text-size-adjust: 100%; } body { margin: 0; background-color: var(--ink-900); color: var(--text); font-family: var(--font-body); font-size: var(--fs-body); font-weight: 300; line-height: 1.75; letter-spacing: 0.012em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } /* Ambient light: one warm source high on the page, plus a deep vignette. Fixed, so it stays put while the content scrolls beneath it. */ body::before { content: ''; position: fixed; inset: 0; z-index: -2; pointer-events: none; background: radial-gradient(120% 70% at 50% -12%, rgba(201, 169, 98, .13) 0%, transparent 58%), radial-gradient(80% 50% at 88% 8%, rgba(201, 169, 98, .07) 0%, transparent 60%), radial-gradient(100% 60% at 8% 100%, rgba(80, 96, 128, .07) 0%, transparent 60%), var(--ink-900); } /* Fine film grain — stops large dark areas banding and adds a material feel */ body::after { content: ''; position: fixed; inset: 0; z-index: 9; pointer-events: none; opacity: .035; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E"); } img, svg { max-width: 100%; } img { height: auto; border-radius: var(--radius-sm); } ::selection { background: var(--gold); color: var(--ink-950); } :focus-visible { outline: 2px solid var(--gold-light); outline-offset: 3px; border-radius: var(--radius-xs); } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: var(--ink-950); } ::-webkit-scrollbar-thumb { background: var(--ink-700); border-radius: var(--radius-pill); border: 2px solid var(--ink-950); } ::-webkit-scrollbar-thumb:hover { background: var(--gold-deep); } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .skip-link { position: absolute; top: -100px; left: var(--s-4); z-index: 200; padding: 0.7rem 1.2rem; background: var(--gold); color: var(--ink-950); font-size: var(--fs-sm); letter-spacing: var(--tracking-ui); text-transform: uppercase; text-decoration: none; border-radius: var(--radius-sm); transition: top var(--t-fast); } .skip-link:focus { top: 1rem; } /* ----------------------------------------------------------------------------- 03. Typography -------------------------------------------------------------------------- */ h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); font-weight: 400; line-height: 1.14; color: var(--ivory); letter-spacing: 0.002em; } h1 { font-size: var(--fs-h1); } h2 { font-size: var(--fs-h2); } h3 { font-size: var(--fs-h3); line-height: 1.25; } h4 { font-family: var(--font-body); font-size: var(--fs-xs); font-weight: 500; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--gold); } p { margin: 0 0 var(--s-4); } p:last-child { margin-bottom: 0; } strong { color: var(--ivory); font-weight: 500; } em { font-style: italic; } a { color: var(--gold); text-decoration: none; transition: color var(--t-fast); } a:hover { color: var(--gold-light); } /* Inline links inside body copy get a refined underline */ .prose a:not(.btn), p > a:not(.btn) { background-image: linear-gradient(var(--line-strong), var(--line-strong)); background-repeat: no-repeat; background-position: 0 100%; background-size: 100% 1px; padding-bottom: 1px; transition: background-size var(--t-mid), color var(--t-fast); } .prose a:not(.btn):hover, p > a:not(.btn):hover { background-size: 100% 2px; } .eyebrow { display: inline-flex; align-items: center; gap: 0.7rem; margin: 0 0 var(--s-4); font-family: var(--font-body); font-size: var(--fs-xs); font-weight: 400; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--gold); } .eyebrow::before { content: ''; width: 34px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold)); } .eyebrow--centred { justify-content: center; } .eyebrow--centred::after { content: ''; width: 34px; height: 1px; background: linear-gradient(90deg, var(--gold), transparent); } .lede { max-width: var(--measure); font-size: var(--fs-lede); font-weight: 200; line-height: 1.72; color: var(--text-dim); } /* A hairline rule with a gold centre — used between major blocks */ hr, .rule { border: 0; height: 1px; margin: var(--s-8) 0; background: linear-gradient(90deg, transparent, var(--line-strong) 50%, transparent); } /* ----------------------------------------------------------------------------- 04. Layout primitives -------------------------------------------------------------------------- */ .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: clamp(1.25rem, 4vw, 2.5rem); } main { display: block; } .section { position: relative; padding-block: var(--s-11); } .section + .section { padding-top: 0; } /* The hero already carries generous bottom padding of its own. */ .hero + .section { padding-top: var(--s-9); } .section-head { max-width: 44rem; margin-bottom: var(--s-8); } .section-head--centred { margin-inline: auto; text-align: center; } .section-head h2 { margin-bottom: var(--s-4); } .section-head .lede { margin: 0; } .section-head--centred .lede { margin-inline: auto; } .grid { display: grid; gap: clamp(1rem, 2vw, 1.75rem); } .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } /* ----------------------------------------------------------------------------- 05. Buttons -------------------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.7rem; padding: 0.95rem 1.9rem; font-family: var(--font-body); font-size: var(--fs-xs); font-weight: 500; letter-spacing: var(--tracking-ui); text-transform: uppercase; text-decoration: none; white-space: nowrap; border: 1px solid transparent; border-radius: var(--radius-sm); cursor: pointer; position: relative; overflow: hidden; isolation: isolate; transition: transform var(--t-mid), box-shadow var(--t-mid), border-color var(--t-fast), color var(--t-fast), background-color var(--t-fast); } .btn svg { flex: none; transition: transform var(--t-mid); } .btn:hover svg { transform: translateX(3px); } /* A sweep of light travels across the button on hover */ .btn::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--gold-sheen); transform: translateX(-120%); transition: transform 0.85s var(--ease-out); } .btn:hover::before { transform: translateX(120%); } .btn--primary { background: var(--gold-grad); color: var(--ink-950); box-shadow: 0 12px 30px -14px rgba(201, 169, 98, .7); } .btn--primary:hover { color: var(--ink-950); transform: translateY(-2px); box-shadow: 0 20px 44px -16px rgba(201, 169, 98, .75); } .btn--ghost { background: transparent; color: var(--ivory); border-color: var(--line-strong); } .btn--ghost:hover { color: var(--gold-light); border-color: var(--gold); transform: translateY(-2px); background: rgba(201, 169, 98, .06); } .btn--small { padding: 0.6rem 1.2rem; } .actions { display: flex; flex-wrap: wrap; gap: var(--s-4); align-items: center; } .actions--centred { justify-content: center; } /* ----------------------------------------------------------------------------- 06. Header, navigation, language switch -------------------------------------------------------------------------- */ .site-header { position: sticky; top: 0; z-index: 100; height: var(--header-h); display: flex; align-items: center; background: var(--glass); backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); border-bottom: 1px solid transparent; transition: border-color var(--t-mid), background-color var(--t-mid); } .site-header.is-scrolled { border-bottom-color: var(--line); background: rgba(8, 9, 11, .88); box-shadow: var(--shadow-sm); } .site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--s-5); width: 100%; } /* Brand lockup */ .brand { display: inline-flex; align-items: center; gap: 0.85rem; text-decoration: none; flex: none; } .brand__mark { width: 40px; height: 40px; flex: none; border-radius: 50%; transition: transform var(--t-mid); } .brand:hover .brand__mark { transform: rotate(-4deg) scale(1.04); } .brand__text { display: flex; flex-direction: column; line-height: 1; } .brand__name { font-family: var(--font-display); font-size: 1.5rem; font-weight: 500; letter-spacing: 0.06em; color: var(--ivory); } .brand__tagline { margin-top: 0.25rem; font-size: 0.58rem; font-weight: 300; letter-spacing: 0.28em; text-transform: uppercase; color: var(--text-faint); } /* Primary navigation */ .nav { display: flex; align-items: center; gap: clamp(0.5rem, 1.6vw, 1.4rem); } .nav__list { display: flex; align-items: center; gap: clamp(0.25rem, 1.4vw, 1rem); margin: 0; padding: 0; list-style: none; } .nav__link { position: relative; display: block; padding: 0.55rem 0.35rem; font-size: var(--fs-xs); font-weight: 400; letter-spacing: var(--tracking-ui); text-transform: uppercase; white-space: nowrap; color: var(--text-dim); transition: color var(--t-fast); } .nav__link::after { content: ''; position: absolute; left: 0; bottom: 0.1rem; width: 100%; height: 1px; background: var(--gold); transform: scaleX(0); transform-origin: right; transition: transform var(--t-mid); } .nav__link:hover { color: var(--ivory); } .nav__link:hover::after { transform: scaleX(1); transform-origin: left; } .nav__link[aria-current="page"] { color: var(--gold-light); } .nav__link[aria-current="page"]::after { transform: scaleX(1); } .nav__divider { width: 1px; height: 22px; background: var(--line-soft); flex: none; } /* Language switch */ .lang-switch { display: inline-flex; align-items: center; gap: 0.15rem; padding: 0.2rem; border: 1px solid var(--line-soft); border-radius: var(--radius-pill); background: rgba(247, 243, 234, .03); } .lang-option { padding: 0.28rem 0.62rem; border: 0; background: transparent; color: var(--text-dim); font-family: var(--font-body); font-size: 0.68rem; font-weight: 500; letter-spacing: 0.12em; cursor: pointer; border-radius: var(--radius-pill); transition: color var(--t-fast), background var(--t-fast); } .lang-option:hover { color: var(--ivory); } .lang-option.active { color: var(--ink-950); background: var(--gold-grad); font-weight: 600; } /* The header CTA is a desktop affordance; on small screens the mobile menu and the in-page calls to action carry it instead. */ .header-cta { flex: none; } /* Mobile menu trigger */ .nav-toggle { display: none; width: 44px; height: 44px; padding: 0; border: 1px solid var(--line-soft); border-radius: var(--radius-sm); background: transparent; cursor: pointer; position: relative; } .nav-toggle span, .nav-toggle span::before, .nav-toggle span::after { content: ''; position: absolute; width: 18px; height: 1px; background: var(--ivory); transition: transform var(--t-mid), background-color var(--t-fast); } .nav-toggle span { top: 50%; left: 50%; margin: -0.5px 0 0 -9px; } .nav-toggle span::before { top: -6px; left: 0; } .nav-toggle span::after { top: 6px; left: 0; } body.menu-open .nav-toggle span { background: transparent; } body.menu-open .nav-toggle span::before { transform: translateY(6px) rotate(45deg); } body.menu-open .nav-toggle span::after { transform: translateY(-6px) rotate(-45deg); } /* Full-screen mobile menu */ .mobile-menu { position: fixed; inset: 0; z-index: 99; display: flex; flex-direction: column; justify-content: center; gap: var(--s-6); padding: var(--header-h) clamp(1.5rem, 8vw, 4rem) var(--s-8); background: linear-gradient(170deg, var(--ink-900) 0%, var(--ink-950) 100%); opacity: 0; visibility: hidden; transform: translateY(-1.5rem); transition: opacity var(--t-mid), transform var(--t-mid), visibility var(--t-mid); } body.menu-open .mobile-menu { opacity: 1; visibility: visible; transform: none; } body.menu-open { overflow: hidden; } .mobile-menu ul { margin: 0; padding: 0; list-style: none; counter-reset: sm-menu; } .mobile-menu li { counter-increment: sm-menu; border-bottom: 1px solid var(--line-soft); } .mobile-menu a { display: flex; align-items: baseline; gap: 1rem; padding: 1.1rem 0; font-family: var(--font-display); font-size: 2rem; font-weight: 400; color: var(--ivory); } .mobile-menu a::before { content: counter(sm-menu, decimal-leading-zero); font-family: var(--font-body); font-size: 0.7rem; letter-spacing: 0.15em; color: var(--gold); } .mobile-menu a[aria-current="page"] { color: var(--gold-light); } .mobile-menu__footer { font-size: var(--fs-xs); letter-spacing: var(--tracking-ui); text-transform: uppercase; color: var(--text-faint); } /* ----------------------------------------------------------------------------- 07. Hero -------------------------------------------------------------------------- */ .hero { position: relative; min-height: min(88vh, 900px); display: flex; flex-direction: column; justify-content: center; padding-block: var(--s-10) var(--s-9); overflow: hidden; isolation: isolate; } /* Slow-drifting warm aurora behind the headline */ .hero__aurora { position: absolute; inset: -25% -10%; z-index: -1; pointer-events: none; background: radial-gradient(38% 32% at 28% 32%, rgba(201, 169, 98, .20) 0%, transparent 68%), radial-gradient(34% 30% at 74% 46%, rgba(231, 211, 161, .13) 0%, transparent 70%), radial-gradient(45% 40% at 52% 82%, rgba(90, 110, 150, .10) 0%, transparent 72%); filter: blur(28px); animation: auroraDrift 26s var(--ease-in-out) infinite alternate; } @keyframes auroraDrift { 0% { transform: translate3d(-2%, 0, 0) scale(1); } 50% { transform: translate3d(2%, -2%, 0) scale(1.06); } 100% { transform: translate3d(1%, 2%, 0) scale(1.02); } } /* Hairline grid, barely visible — architectural texture */ .hero::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .5; background-image: linear-gradient(90deg, var(--line-soft) 1px, transparent 1px), linear-gradient(var(--line-soft) 1px, transparent 1px); background-size: 120px 120px; mask-image: radial-gradient(75% 60% at 50% 40%, #000 0%, transparent 78%); -webkit-mask-image: radial-gradient(75% 60% at 50% 40%, #000 0%, transparent 78%); } .hero__inner { max-width: 62rem; } .hero__title { font-size: var(--fs-display); font-weight: 300; line-height: 0.98; letter-spacing: -0.015em; color: var(--ivory); margin: 0 0 var(--s-5); } .hero__title em { display: block; font-style: italic; font-weight: 300; background: linear-gradient(96deg, var(--gold-pale) 0%, var(--gold) 42%, var(--gold-deep) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; /* Stops background-clip from cropping the italic descenders */ padding-bottom: 0.08em; } .hero__lede { max-width: 40rem; font-size: var(--fs-lede); font-weight: 200; line-height: 1.75; color: var(--text-dim); margin-bottom: var(--s-7); } /* Trust strip along the bottom of the hero. A grid rather than a wrapping flex row, so the four claims stay evenly spaced instead of leaving one stranded on a second line. */ .hero__strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1rem clamp(1.25rem, 3vw, 2.5rem); margin-top: var(--s-9); padding-top: var(--s-5); border-top: 1px solid var(--line-soft); } .hero__strip-item { display: flex; align-items: flex-start; gap: 0.6rem; font-size: var(--fs-xs); line-height: 1.5; letter-spacing: 0.13em; text-transform: uppercase; color: var(--text-faint); } /* Offset rather than centred, so the marker stays on the first line when a claim wraps onto two. */ .hero__strip-item::before { content: ''; width: 5px; height: 5px; margin-top: 0.55em; flex: none; border-radius: 50%; background: var(--gold); box-shadow: 0 0 12px rgba(201, 169, 98, .8); } .scroll-cue { display: inline-flex; align-items: center; gap: 0.75rem; margin-top: var(--s-7); font-size: var(--fs-xs); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--text-faint); } .scroll-cue__line { display: block; width: 54px; height: 1px; background: linear-gradient(90deg, var(--gold), transparent); position: relative; overflow: hidden; } .scroll-cue__line::after { content: ''; position: absolute; inset: 0; background: var(--gold-light); animation: cueSlide 2.6s var(--ease-in-out) infinite; } @keyframes cueSlide { 0% { transform: translateX(-100%); } 60% { transform: translateX(100%); } 100% { transform: translateX(100%); } } /* ----------------------------------------------------------------------------- 08. Editorial feature rows -------------------------------------------------------------------------- */ .feature { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: center; gap: clamp(2rem, 5vw, 5rem); padding-block: clamp(2.5rem, 5vw, 4.5rem); border-top: 1px solid var(--line-soft); } .feature:first-of-type { border-top: 0; } .feature--reverse .feature__media { order: 2; } .feature--reverse .feature__body { order: 1; } .feature__media { position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius-md); border: 1px solid var(--line); background: var(--surface); overflow: hidden; box-shadow: var(--shadow-md); transition: transform var(--t-slow), border-color var(--t-mid), box-shadow var(--t-slow); } .feature__media svg { display: block; width: 100%; height: 100%; } .feature__media::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(135deg, rgba(201, 169, 98, .10) 0%, transparent 45%, rgba(7, 8, 10, .45) 100%); } .feature:hover .feature__media { transform: translateY(-4px); border-color: var(--line-strong); box-shadow: var(--shadow-lg), var(--glow-gold); } .feature__body { max-width: 34rem; } .feature__body h3 { margin-bottom: var(--s-3); } .feature__tagline { font-family: var(--font-display); font-size: 1.22rem; font-style: italic; font-weight: 300; line-height: 1.5; color: var(--gold-light); margin-bottom: var(--s-4); } .feature__text { color: var(--text); margin-bottom: var(--s-5); } .tag { display: inline-block; margin-bottom: var(--s-4); padding: 0.32rem 0.85rem; font-size: 0.66rem; font-weight: 400; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--gold); border: 1px solid var(--line); border-radius: var(--radius-pill); background: rgba(201, 169, 98, .07); } .chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; list-style: none; } .chips li { padding: 0.35rem 0.8rem; font-size: 0.72rem; letter-spacing: 0.06em; color: var(--text-dim); border: 1px solid var(--line-soft); border-radius: var(--radius-sm); background: rgba(247, 243, 234, .02); transition: color var(--t-fast), border-color var(--t-fast); } .feature:hover .chips li { color: var(--text); border-color: var(--line); } /* ----------------------------------------------------------------------------- 09. Cards, panels, lists, steps, stats -------------------------------------------------------------------------- */ .card { position: relative; display: flex; flex-direction: column; gap: var(--s-3); padding: clamp(1.5rem, 3vw, 2.25rem); border: 1px solid var(--line-soft); border-radius: var(--radius-md); background: var(--surface); overflow: hidden; transition: transform var(--t-mid), border-color var(--t-mid), box-shadow var(--t-mid); } /* Gold hairline that draws itself along the top edge on hover */ .card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 1px; background: var(--gold-grad); transform: scaleX(0); transform-origin: left; transition: transform var(--t-slow); } .card:hover { transform: translateY(-4px); border-color: var(--line); box-shadow: var(--shadow-md); } .card:hover::before { transform: scaleX(1); } .card__icon { width: 44px; height: 44px; margin-bottom: var(--s-2); color: var(--gold); } .card h3 { font-size: 1.32rem; } .card p { color: var(--text-dim); font-size: 0.96rem; margin: 0; } /* Content panel used by the text-led pages */ .panel { position: relative; padding: clamp(1.75rem, 4vw, 3rem); margin-bottom: var(--s-5); border: 1px solid var(--line-soft); border-radius: var(--radius-md); background: var(--surface); transition: border-color var(--t-mid), box-shadow var(--t-mid); } .panel::before { content: ''; position: absolute; top: clamp(1.75rem, 4vw, 3rem); left: -1px; width: 2px; height: 0; background: linear-gradient(180deg, var(--gold), transparent); transition: height var(--t-slow); } .panel:hover { border-color: var(--line); box-shadow: var(--shadow-md); } .panel:hover::before { height: 64px; } .panel > h3 { margin-bottom: var(--s-3); } /* Definition-style list with gold diamond markers */ .spec-list { margin: var(--s-4) 0 0; padding: 0; list-style: none; } .spec-list li { position: relative; padding: 0.6rem 0 0.6rem 1.75rem; border-top: 1px solid var(--line-soft); color: var(--text-dim); font-size: 0.97rem; line-height: 1.65; } .spec-list li::before { content: ''; position: absolute; left: 0.15rem; top: 1.22rem; width: 7px; height: 7px; border: 1px solid var(--gold); transform: rotate(45deg); } .spec-list li:first-child { border-top: 0; padding-top: 0; } .spec-list li:first-child::before { top: 0.62rem; } .spec-list strong { color: var(--ivory); font-weight: 500; } /* Generic prose lists */ .prose ul { padding-left: 1.1rem; margin: 0 0 var(--s-4); } .prose li { margin-bottom: 0.4rem; color: var(--text-dim); } .prose li::marker { color: var(--gold); } /* Numbered process */ .steps { counter-reset: sm-step; margin: 0; padding: 0; list-style: none; } .step { counter-increment: sm-step; position: relative; padding: var(--s-5) 0 var(--s-5) clamp(3.5rem, 7vw, 5.5rem); border-top: 1px solid var(--line-soft); } .step:last-child { border-bottom: 1px solid var(--line-soft); } .step::before { content: counter(sm-step, decimal-leading-zero); position: absolute; left: 0; top: var(--s-5); font-family: var(--font-display); font-size: 1.6rem; font-weight: 400; color: var(--gold); opacity: .85; } .step h3 { font-size: 1.28rem; margin-bottom: var(--s-2); } .step p { color: var(--text-dim); margin: 0; } /* Figures / statements */ .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1px; background: var(--line-soft); border: 1px solid var(--line-soft); border-radius: var(--radius-md); overflow: hidden; } .stat { padding: clamp(1.5rem, 3vw, 2.25rem); background: var(--ink-850); text-align: center; } .stat__value { display: block; font-family: var(--font-display); font-size: clamp(2.1rem, 1.4rem + 2vw, 3.1rem); font-weight: 400; line-height: 1; color: var(--gold-light); } .stat__label { display: block; margin-top: 0.6rem; font-size: var(--fs-xs); letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-faint); } /* Pull quote */ .quote { max-width: 46rem; margin: var(--s-8) auto; padding-left: clamp(1.25rem, 3vw, 2.5rem); border-left: 1px solid var(--line-strong); font-family: var(--font-display); font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2.05rem); font-style: italic; font-weight: 300; line-height: 1.45; color: var(--ivory); } .quote p { margin: 0; color: inherit; } .quote cite { display: block; margin-top: var(--s-4); font-family: var(--font-body); font-size: var(--fs-xs); font-style: normal; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--gold); } /* ----------------------------------------------------------------------------- 10. CTA band -------------------------------------------------------------------------- */ .cta-band { position: relative; margin-top: var(--s-9); padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1.5rem, 5vw, 4rem); text-align: center; border: 1px solid var(--line); border-radius: var(--radius-lg); background: radial-gradient(90% 130% at 50% 0%, rgba(201, 169, 98, .12) 0%, transparent 62%), var(--surface); overflow: hidden; } .cta-band::before { content: ''; position: absolute; top: 0; left: 50%; width: min(420px, 70%); height: 1px; transform: translateX(-50%); background: linear-gradient(90deg, transparent, var(--gold), transparent); } .cta-band h2 { margin-bottom: var(--s-4); } .cta-band p { max-width: 34rem; margin: 0 auto var(--s-6); color: var(--text-dim); font-size: var(--fs-lede); font-weight: 200; } /* ----------------------------------------------------------------------------- 11. Footer -------------------------------------------------------------------------- */ .site-footer { margin-top: var(--s-11); border-top: 1px solid var(--line-soft); background: linear-gradient(180deg, transparent 0%, var(--ink-950) 100%); color: var(--text-dim); } .site-footer__grid { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 5vw, 4rem); padding-block: var(--s-9) var(--s-7); } .site-footer h4 { margin-bottom: var(--s-4); } .site-footer p { font-size: 0.94rem; color: var(--text-dim); } .site-footer ul { margin: 0; padding: 0; list-style: none; } .site-footer li { margin-bottom: 0.55rem; } .site-footer li a { font-size: 0.94rem; color: var(--text-dim); } .site-footer li a:hover { color: var(--gold-light); } .footer-brand { display: inline-flex; align-items: center; gap: 0.75rem; margin-bottom: var(--s-4); } .footer-brand img { width: 36px; height: 36px; border-radius: 50%; } .footer-brand span { font-family: var(--font-display); font-size: 1.35rem; letter-spacing: 0.06em; color: var(--ivory); } .site-footer__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-4); padding-block: var(--s-5); border-top: 1px solid var(--line-soft); font-size: var(--fs-xs); letter-spacing: 0.1em; color: var(--text-faint); } .site-footer__bottom p { margin: 0; font-size: inherit; color: inherit; } /* ----------------------------------------------------------------------------- 12. Page transition & scroll reveal -------------------------------------------------------------------------- */ #page { position: relative; min-height: 60vh; } #page.is-leaving { opacity: 0; transform: translateY(10px); transition: opacity 0.24s ease-in, transform 0.24s ease-in; } #page.is-entering { animation: pageIn 0.55s var(--ease-out) both; } @keyframes pageIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } } /* Gated behind the `js` class that index.html sets on . Without JavaScript nothing would ever add `is-visible`, so the