/* ---------------------------------------------------------- Saqib Ali & Associates — editorial design system Palettes are CSS vars on Density is controlled by ----------------------------------------------------------- */ :root{ --serif: "Instrument Serif", "Times New Roman", serif; --sans: "Geist", ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif; --mono: "Geist Mono", ui-monospace, Menlo, monospace; --radius: 2px; --radius-lg: 10px; --container: 1280px; --gutter: clamp(20px, 4vw, 56px); --section-y: clamp(96px, 14vw, 168px); --ease: cubic-bezier(.2,.7,.2,1); } /* palettes */ body[data-palette="ink"]{ --bg: #F6F3EC; --bg-2: #EEE9DE; --ink: #0B1B2B; --ink-2: #1E2D3E; --muted: #5A6778; --hair: rgba(11,27,43,.12); --hair-strong: rgba(11,27,43,.24); --accent: #B8894A; --accent-2: #C9A164; --invert-bg: #0B1B2B; --invert-fg: #F6F3EC; --invert-muted: #9AA7B6; } body[data-palette="forest"]{ --bg: #F3EFE6; --bg-2: #E9E3D4; --ink: #0F2A20; --ink-2: #19392C; --muted: #586A60; --hair: rgba(15,42,32,.14); --hair-strong: rgba(15,42,32,.26); --accent: #A8833F; --accent-2: #C4A057; --invert-bg: #0F2A20; --invert-fg: #F3EFE6; --invert-muted: #9AB0A4; } body[data-palette="bone"]{ --bg: #FFFFFF; --bg-2: #F5F2EC; --ink: #141414; --ink-2: #2A2A2A; --muted: #6B6B6B; --hair: rgba(20,20,20,.12); --hair-strong: rgba(20,20,20,.24); --accent: #8A6A3B; --accent-2: #A58446; --invert-bg: #141414; --invert-fg: #FFFFFF; --invert-muted: #9A9A9A; } body[data-density="compact"]{ --section-y: clamp(72px, 10vw, 120px); } body[data-density="spacious"]{ --section-y: clamp(128px, 18vw, 220px); } *{ box-sizing: border-box; } html, body{ margin:0; padding:0; } html{ scroll-behavior: smooth; } body{ background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-feature-settings: "ss01","cv11"; } img{ max-width:100%; display:block; } a{ color: inherit; text-decoration: none; } button{ font: inherit; color: inherit; background:none; border:0; cursor:pointer; padding:0; } /* layout */ .container{ max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); } .section{ padding-block: var(--section-y); } .hairline{ height:1px; background: var(--hair); border:0; } .hairline-strong{ height:1px; background: var(--hair-strong); border:0; } /* type ramp */ .eyebrow{ font-family: var(--mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); } .display{ font-family: var(--serif); font-weight: 400; letter-spacing: -0.02em; line-height: 0.95; font-size: clamp(48px, 9vw, 132px); color: var(--ink); } .display em{ font-style: italic; color: var(--accent); } .h1{ font-family: var(--serif); font-weight: 400; font-size: clamp(40px, 6vw, 80px); line-height: 1.0; letter-spacing: -0.015em; } .h2{ font-family: var(--serif); font-weight: 400; font-size: clamp(30px, 3.4vw, 48px); line-height: 1.08; letter-spacing: -0.01em; } .h3{ font-family: var(--sans); font-weight: 500; font-size: 22px; line-height: 1.25; letter-spacing: -0.005em; } .lede{ font-family: var(--sans); font-weight: 400; font-size: clamp(18px, 1.6vw, 22px); line-height: 1.5; color: var(--ink-2); max-width: 62ch; text-wrap: pretty; } .body{ font-size: 16px; color: var(--ink-2); line-height: 1.6; text-wrap: pretty; } .small{ font-size: 14px; color: var(--muted); } .mono{ font-family: var(--mono); letter-spacing:.02em; } /* buttons + links */ .btn{ display: inline-flex; align-items: center; gap: 10px; height: 46px; padding: 0 20px; border-radius: 999px; font-weight: 500; font-size: 14px; letter-spacing: 0.01em; transition: transform .25s var(--ease), background .25s var(--ease), color .25s var(--ease); border: 1px solid transparent; } .btn-primary{ background: var(--ink); color: var(--invert-fg); } .btn-primary:hover{ transform: translateY(-1px); } .btn-ghost{ border-color: var(--hair-strong); color: var(--ink); } .btn-ghost:hover{ background: var(--ink); color: var(--invert-fg); border-color: var(--ink); } .btn .arrow{ width: 16px; height: 16px; transition: transform .25s var(--ease); } .btn:hover .arrow{ transform: translateX(3px); } .link{ display: inline-flex; align-items:center; gap: 8px; border-bottom: 1px solid var(--hair-strong); padding-bottom: 2px; font-weight: 500; font-size: 14px; letter-spacing: 0.005em; } .link:hover{ border-color: var(--ink); } /* nav */ .nav{ position: sticky; top: 0; z-index: 40; backdrop-filter: blur(14px); background: color-mix(in oklab, var(--bg), transparent 25%); border-bottom: 1px solid var(--hair); } .nav-inner{ display:flex; align-items:center; justify-content: space-between; height: 68px; } .nav-links{ display: none; gap: 28px; } .nav-links a{ font-size: 13.5px; color: var(--ink-2); letter-spacing: 0.005em; } .nav-links a:hover{ color: var(--ink); } @media (min-width: 960px){ .nav-links{ display:flex; } } /* logo mark */ .wordmark{ display: flex; align-items: center; gap: 12px; font-family: var(--serif); font-size: 20px; letter-spacing: -0.005em; line-height: 1; } .logo-mark{ width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--ink); border-radius: 50%; font-family: var(--serif); font-size: 14px; letter-spacing: 0.02em; } .wordmark-meta{ display: none; font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); padding-left: 12px; margin-left: 4px; border-left: 1px solid var(--hair); } @media (min-width: 720px){ .wordmark-meta{ display: inline-block; } } /* --- hero --- */ .hero{ position: relative; padding-top: clamp(48px, 8vw, 120px); padding-bottom: clamp(72px, 10vw, 140px); overflow: hidden; } .hero-meta{ display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: center; color: var(--muted); font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; padding-bottom: 24px; border-bottom: 1px solid var(--hair); margin-bottom: clamp(48px, 8vw, 96px); } .hero-display{ display: block; } .hero-grid{ display: grid; grid-template-columns: 1fr; gap: 48px; align-items: end; } @media (min-width: 960px){ .hero-grid{ grid-template-columns: 1.45fr 1fr; gap: 72px; } } .hero-side{ display: flex; flex-direction: column; gap: 32px; padding-bottom: 12px; } .hero-photo{ position: relative; aspect-ratio: 4/5; overflow: hidden; border-radius: var(--radius-lg); background: var(--bg-2); } .hero-photo img{ width: 100%; height: 100%; object-fit: cover; object-position: 30% 30%; filter: contrast(1.02) saturate(0.95); transition: transform 1s var(--ease); } .hero-photo:hover img{ transform: scale(1.03); } .photo-caption{ position: absolute; left: 20px; right: 20px; bottom: 18px; color: var(--invert-fg); font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; mix-blend-mode: difference; } /* pull quote hero variant */ .hero-quote{ font-family: var(--serif); font-size: clamp(36px, 5.6vw, 80px); line-height: 1.05; letter-spacing: -0.015em; } .hero-quote em{ color: var(--accent); font-style: italic; } /* data hero variant */ .data-grid{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; border-top: 1px solid var(--hair-strong); } @media (min-width: 720px){ .data-grid{ grid-template-columns: repeat(4, 1fr); } } .data-cell{ padding: 40px 28px; border-bottom: 1px solid var(--hair-strong); border-right: 1px solid var(--hair); } .data-cell:nth-child(2n){ border-right: 1px solid var(--hair-strong); } @media (min-width: 720px){ .data-cell{ border-right: 1px solid var(--hair); } .data-cell:nth-child(4n){ border-right: 1px solid var(--hair-strong); } } .data-num{ font-family: var(--serif); font-size: clamp(48px, 5vw, 72px); line-height: 1; letter-spacing: -0.02em; display: flex; align-items: baseline; gap: 6px; } .data-num sup{ font-family: var(--sans); font-size: 18px; color: var(--accent); letter-spacing: 0; vertical-align: super; } .data-label{ margin-top: 14px; font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); } /* proof strip (marquee-ish, static) */ .proof{ border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); padding-block: 26px; display: grid; gap: 28px; align-items: center; grid-template-columns: auto 1fr auto; } .proof-label{ font-family: var(--mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); } .proof-items{ display: flex; gap: 40px; overflow: hidden; color: var(--ink-2); font-family: var(--serif); font-size: clamp(18px, 2vw, 26px); letter-spacing: -0.005em; white-space: nowrap; flex-wrap: wrap; } .proof-items span{ display: inline-flex; align-items:center; gap: 14px;} .proof-items span::after{ content: "✦"; color: var(--accent); font-size: 11px; } .proof-items span:last-child::after{ content: ""; } /* section header */ .section-head{ display: grid; grid-template-columns: 1fr; gap: 16px; padding-bottom: clamp(40px, 5vw, 64px); border-bottom: 1px solid var(--hair); margin-bottom: clamp(40px, 5vw, 72px); } @media (min-width: 960px){ .section-head{ grid-template-columns: 1fr 1.6fr; gap: 72px; align-items: end; } } .section-index{ display: flex; align-items: baseline; gap: 12px; font-family: var(--mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); } .section-index em{ color: var(--ink); font-style: normal; } /* about */ .about-grid{ display: grid; grid-template-columns: 1fr; gap: 48px; } @media (min-width: 960px){ .about-grid{ grid-template-columns: 1fr 1fr; gap: 96px; } } .founder-card{ display: grid; gap: 0; grid-template-rows: auto auto; background: var(--bg-2); border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--hair); } .founder-photo{ aspect-ratio: 4/3; overflow: hidden; } .founder-photo img{ width:100%; height:100%; object-fit: cover; object-position: 30% 20%; } .founder-meta{ padding: 28px 28px 32px; display: grid; gap: 10px; } .founder-name{ font-family: var(--serif); font-size: 28px; line-height: 1.1; } .founder-role{ font-family: var(--mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); } .credentials{ margin-top: 12px; display: flex; flex-wrap: wrap; gap: 6px; } .cred-chip{ font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); padding: 6px 10px; border: 1px solid var(--hair-strong); border-radius: 999px; } /* services */ .services{ display: grid; grid-template-columns: 1fr; border-top: 1px solid var(--hair); } @media (min-width: 720px){ .services{ grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1040px){ .services{ grid-template-columns: repeat(3, 1fr); } } .service{ position: relative; padding: 40px 32px 36px; border-bottom: 1px solid var(--hair); border-right: 1px solid var(--hair); display: grid; grid-template-rows: auto 1fr auto; gap: 20px; min-height: 320px; cursor: pointer; transition: background .35s var(--ease); } .service:hover{ background: var(--bg-2); } .service:last-child{ border-right: 0; } @media (min-width: 720px){ .service:nth-child(2n){ border-right: 0; } .service:nth-child(3), .service:nth-child(4){ border-right: 1px solid var(--hair); } } @media (min-width: 1040px){ .service{ border-right: 1px solid var(--hair) !important; } .service:nth-child(3n){ border-right: 0 !important; } } .service-num{ font-family: var(--mono); font-size: 11px; letter-spacing: .18em; color: var(--muted); } .service-title{ font-family: var(--serif); font-size: 30px; letter-spacing: -0.01em; line-height: 1.05; } .service-desc{ color: var(--ink-2); font-size: 14.5px; line-height: 1.55; } .service-foot{ display: flex; align-items: center; justify-content: space-between; padding-top: 12px; border-top: 1px solid var(--hair); font-family: var(--mono); font-size: 11px; letter-spacing: .15em; text-transform: uppercase; color: var(--muted); } .service-foot .arrow{ width: 14px; height: 14px; color: var(--ink); transition: transform .3s var(--ease); } .service:hover .service-foot .arrow{ transform: translateX(6px); } /* process */ .process{ display: grid; gap: 0; grid-template-columns: 1fr; border-top: 1px solid var(--hair-strong); } .process-row{ display: grid; grid-template-columns: 72px 1fr; gap: 16px; padding: 32px 0; border-bottom: 1px solid var(--hair); align-items: start; } @media (min-width: 960px){ .process-row{ grid-template-columns: 100px 1.2fr 2fr; gap: 40px; padding: 40px 0; } } .process-num{ font-family: var(--serif); font-size: 40px; line-height: 1; color: var(--accent); } .process-title{ font-family: var(--serif); font-size: 26px; line-height: 1.1; letter-spacing: -0.005em; } .process-body{ color: var(--ink-2); font-size: 15px; line-height: 1.6; max-width: 56ch; } /* compliance calendar */ .calendar-card{ border: 1px solid var(--hair-strong); border-radius: var(--radius-lg); overflow: hidden; background: var(--bg); } .calendar-head{ display: grid; gap: 12px; padding: 24px 28px; border-bottom: 1px solid var(--hair); background: var(--bg-2); } @media (min-width: 720px){ .calendar-head{ grid-template-columns: 1fr auto; align-items: center; } } .calendar-title{ font-family: var(--serif); font-size: 26px; line-height: 1.1; } .calendar-tabs{ display: flex; gap: 6px; background: var(--bg); border: 1px solid var(--hair); border-radius: 999px; padding: 4px; } .calendar-tab{ padding: 7px 14px; font-family: var(--mono); font-size: 11px; letter-spacing: .15em; text-transform: uppercase; color: var(--muted); border-radius: 999px; } .calendar-tab[aria-selected="true"]{ background: var(--ink); color: var(--invert-fg); } .calendar-list{ padding: 4px 0; } .calendar-item{ display: grid; grid-template-columns: 96px 1fr auto; gap: 20px; padding: 18px 28px; border-bottom: 1px solid var(--hair); align-items: center; transition: background .25s var(--ease); } .calendar-item:last-child{ border-bottom: 0; } .calendar-item:hover{ background: var(--bg-2); } .cal-date{ display: grid; gap: 2px; font-family: var(--serif); line-height: 1; } .cal-date .d{ font-size: 32px; letter-spacing: -0.02em; } .cal-date .m{ font-family: var(--mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); } .cal-title{ font-size: 15px; font-weight: 500; letter-spacing: -0.005em; } .cal-sub{ color: var(--muted); font-size: 13px; margin-top: 4px; } .cal-tag{ font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; padding: 6px 10px; border-radius: 999px; border: 1px solid var(--hair-strong); color: var(--ink-2); white-space: nowrap; } .cal-tag[data-urgency="high"]{ background: color-mix(in oklab, var(--accent), transparent 85%); border-color: var(--accent); color: var(--accent); } /* insights */ .insights{ display: grid; grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--hair-strong); } @media (min-width: 720px){ .insights{ grid-template-columns: repeat(3, 1fr); } } .insight{ padding: 32px 28px; border-bottom: 1px solid var(--hair); border-right: 1px solid var(--hair); display: grid; gap: 14px; grid-template-rows: auto auto 1fr auto; min-height: 320px; background: var(--bg); transition: background .3s var(--ease); } .insight:hover{ background: var(--bg-2); } .insight:last-child{ border-right: 0; } @media (min-width: 720px){ .insight:nth-child(3n){ border-right: 0; } } .insight-kicker{ display: flex; justify-content: space-between; font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); } .insight-title{ font-family: var(--serif); font-size: 24px; line-height: 1.15; letter-spacing: -0.005em; } /* testimonial */ .testimonial-card{ padding: clamp(40px, 6vw, 80px) clamp(32px, 5vw, 80px); background: var(--invert-bg); color: var(--invert-fg); border-radius: var(--radius-lg); display: grid; gap: 40px; } .testimonial-quote{ font-family: var(--serif); font-size: clamp(28px, 3.4vw, 46px); line-height: 1.15; letter-spacing: -0.01em; color: var(--invert-fg); } .testimonial-quote em{ color: var(--accent-2); font-style: italic; } .testimonial-foot{ display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; border-top: 1px solid rgba(255,255,255,.16); padding-top: 24px; } .testimonial-who{ display: grid; gap: 4px; } .testimonial-name{ font-family: var(--serif); font-size: 22px; } .testimonial-role{ font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--invert-muted); } .testimonial-ctrls{ display:flex; gap: 10px; } .testimonial-ctrls button{ width: 44px; height: 44px; border-radius: 999px; border: 1px solid rgba(255,255,255,.22); color: var(--invert-fg); display:grid; place-items:center; transition: background .25s var(--ease); } .testimonial-ctrls button:hover{ background: rgba(255,255,255,.08); } /* clients strip */ .clients{ display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); } @media (min-width: 720px){ .clients{ grid-template-columns: repeat(3, 1fr); } } @media (min-width: 960px){ .clients{ grid-template-columns: repeat(6, 1fr); } } .client{ padding: 32px 16px; display: grid; place-items: center; border-right: 1px solid var(--hair); color: var(--ink-2); font-family: var(--serif); font-size: 18px; letter-spacing: -0.005em; text-align:center; } .client:last-child{ border-right: 0; } @media (min-width: 720px){ .client:nth-child(3n){ border-right: 0; } .client:nth-child(4), .client:nth-child(5), .client:nth-child(6){ border-right: 1px solid var(--hair); } } @media (min-width: 960px){ .client:nth-child(n){ border-right: 1px solid var(--hair); } .client:nth-child(6n){ border-right: 0; } } /* careers */ .careers{ display: grid; gap: 0; grid-template-columns: 1fr; border-top: 1px solid var(--hair-strong); } .career-row{ display: grid; grid-template-columns: 1fr auto; gap: 24px; padding: 28px 0; border-bottom: 1px solid var(--hair); align-items: center; cursor: pointer; transition: padding .35s var(--ease); } .career-row:hover{ padding-left: 12px; } .career-title{ font-family: var(--serif); font-size: clamp(24px, 2.6vw, 34px); line-height: 1.1; letter-spacing: -0.005em; } .career-meta{ display: flex; gap: 20px; margin-top: 8px; font-family: var(--mono); font-size: 11px; letter-spacing: .15em; text-transform: uppercase; color: var(--muted); } .career-arrow{ width: 52px; height: 52px; display:grid; place-items:center; border-radius: 999px; border: 1px solid var(--hair-strong); transition: background .25s var(--ease), color .25s var(--ease); } .career-row:hover .career-arrow{ background: var(--ink); color: var(--invert-fg); border-color: var(--ink); } /* FAQ */ .faq-item{ border-bottom: 1px solid var(--hair); } .faq-q{ width: 100%; display: grid; grid-template-columns: auto 1fr auto; gap: 20px; padding: 26px 0; text-align: left; align-items: center; font-family: var(--serif); font-size: clamp(20px, 2vw, 26px); letter-spacing: -0.005em; line-height: 1.2; } .faq-n{ font-family: var(--mono); font-size: 11px; color: var(--muted); letter-spacing: .18em; } .faq-toggle{ width: 34px; height: 34px; border: 1px solid var(--hair-strong); border-radius: 999px; display: grid; place-items:center; transition: transform .3s var(--ease); } .faq-item[data-open="true"] .faq-toggle{ transform: rotate(45deg); background: var(--ink); color: var(--invert-fg); border-color: var(--ink); } .faq-a{ overflow: hidden; max-height: 0; transition: max-height .5s var(--ease), padding .3s var(--ease); padding: 0 0 0 44px; } .faq-item[data-open="true"] .faq-a{ max-height: 400px; padding: 0 0 28px 44px; } .faq-a p{ margin: 0; color: var(--ink-2); font-size: 15.5px; line-height: 1.6; max-width: 68ch; } /* contact */ .contact{ display: grid; grid-template-columns: 1fr; gap: 48px; } @media (min-width: 960px){ .contact{ grid-template-columns: 1.1fr 1fr; gap: 72px; } } .contact-form{ display: grid; gap: 22px; } .field{ display: grid; gap: 8px; border-bottom: 1px solid var(--hair-strong); padding-bottom: 10px; transition: border-color .3s var(--ease); } .field:focus-within{ border-color: var(--ink); } .field label{ font-family: var(--mono); font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); } .field input, .field textarea, .field select{ width: 100%; background: transparent; border: 0; outline: 0; padding: 4px 0; font: inherit; font-size: 17px; color: var(--ink); font-family: var(--serif); resize: none; } .field input::placeholder, .field textarea::placeholder{ color: color-mix(in oklab, var(--muted), transparent 25%); } .chips{ display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 0 2px; } .chip{ padding: 8px 12px; border: 1px solid var(--hair-strong); border-radius: 999px; font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); transition: background .25s var(--ease), color .25s var(--ease); } .chip[data-on="true"]{ background: var(--ink); color: var(--invert-fg); border-color: var(--ink); } .contact-side{ display:grid; gap: 32px; align-content: start; } .contact-block{ display: grid; gap: 6px; padding-bottom: 24px; border-bottom: 1px solid var(--hair); } .contact-label{ font-family: var(--mono); font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); } .contact-val{ font-family: var(--serif); font-size: 22px; line-height: 1.2; } .map{ position: relative; aspect-ratio: 5/3; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--hair); background: linear-gradient(135deg, var(--bg-2) 0%, var(--bg) 70%); } .map svg{ width: 100%; height: 100%; } .map-pin{ position: absolute; left: 52%; top: 48%; transform: translate(-50%, -50%); display:grid; place-items:center; } .map-pin .dot{ width: 14px; height: 14px; background: var(--accent); border-radius: 999px; box-shadow: 0 0 0 6px color-mix(in oklab, var(--accent), transparent 75%), 0 0 0 14px color-mix(in oklab, var(--accent), transparent 90%); animation: pulse 2.4s var(--ease) infinite; } @keyframes pulse{ 0%{ box-shadow: 0 0 0 0 color-mix(in oklab, var(--accent), transparent 40%), 0 0 0 0 color-mix(in oklab, var(--accent), transparent 60%);} 100%{ box-shadow: 0 0 0 14px color-mix(in oklab, var(--accent), transparent 100%), 0 0 0 32px color-mix(in oklab, var(--accent), transparent 100%);} } .map-label{ position: absolute; left: 16px; top: 14px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); background: var(--bg); padding: 6px 10px; border-radius: 999px; border: 1px solid var(--hair); } /* compliance cues strip */ .compliance-strip{ display: grid; grid-template-columns: 1fr; gap: 24px; align-items: center; padding: 28px 0; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); } @media (min-width: 720px){ .compliance-strip{ grid-template-columns: auto 1fr auto; gap: 40px; } } .compliance-emblem{ display: flex; align-items: center; gap: 14px; } .compliance-emblem img{ width: 48px; height: 48px; object-fit: contain; border-radius: 6px; background: #fff; padding: 4px; border: 1px solid var(--hair); } .compliance-meta{ font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); line-height: 1.6; } .compliance-note{ font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); max-width: 52ch; line-height: 1.6; } /* footer */ .footer{ background: var(--invert-bg); color: var(--invert-fg); padding-block: clamp(80px, 10vw, 140px) 40px; } .footer .eyebrow, .footer .footer-label{ color: var(--invert-muted); } .footer-hero{ font-family: var(--serif); font-size: clamp(40px, 6vw, 92px); line-height: 1.0; letter-spacing: -0.015em; max-width: 16ch; } .footer-hero em{ color: var(--accent-2); font-style: italic; } .footer-grid{ display: grid; grid-template-columns: 1fr; gap: 40px; padding-top: 80px; border-top: 1px solid rgba(255,255,255,.14); margin-top: 80px; } @media (min-width: 720px){ .footer-grid{ grid-template-columns: 2fr 1fr 1fr 1fr; } } .footer-col{ display:grid; gap: 14px; align-content: start; } .footer-label{ font-family: var(--mono); font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; } .footer-col a{ font-size: 14.5px; color: var(--invert-fg); opacity: .85; } .footer-col a:hover{ opacity: 1; } .footer-bottom{ display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-top: 56px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.12); font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--invert-muted); } /* Tweaks panel */ .tweaks-panel{ position: fixed; right: 20px; bottom: 20px; z-index: 80; width: 320px; background: var(--bg); color: var(--ink); border: 1px solid var(--hair-strong); border-radius: 14px; box-shadow: 0 30px 60px -20px rgba(0,0,0,.25); overflow: hidden; font-family: var(--sans); } .tweaks-head{ display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--hair); background: var(--bg-2); } .tweaks-title{ font-family: var(--mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); } .tweaks-body{ padding: 16px; display: grid; gap: 18px; } .tweak-row{ display: grid; gap: 10px; } .tweak-label{ font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); } .tweak-opts{ display: flex; gap: 6px; flex-wrap: wrap; } .tweak-opt{ flex: 1; min-width: 0; padding: 10px 12px; font-size: 12px; border: 1px solid var(--hair-strong); border-radius: 8px; color: var(--ink-2); text-align:center; transition: background .2s var(--ease), color .2s var(--ease); } .tweak-opt[aria-selected="true"]{ background: var(--ink); color: var(--invert-fg); border-color: var(--ink); } .tweak-swatch{ width: 14px; height: 14px; border-radius: 999px; display: inline-block; vertical-align: middle; margin-right: 8px; border: 1px solid rgba(0,0,0,.14); } .tweak-toggle{ display: flex; align-items: center; justify-content: space-between; padding: 12px; border: 1px solid var(--hair-strong); border-radius: 10px; font-size: 12.5px; } .switch{ width: 36px; height: 20px; border-radius: 999px; background: var(--hair-strong); position: relative; transition: background .25s var(--ease); } .switch::after{ content:''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; background: var(--bg); border-radius: 999px; transition: transform .25s var(--ease); } .switch[data-on="true"]{ background: var(--ink); } .switch[data-on="true"]::after{ transform: translateX(16px); } /* reveal */ .reveal{ opacity: 0; transform: translateY(16px); transition: opacity .9s var(--ease), transform .9s var(--ease); } .reveal.in{ opacity: 1; transform: none; }