/* ============================================================================ PLANSMITH — clean-room marketing site Art direction derived from the arup.com structural language. Canvas: light-dominant (Arup-faithful). Type: Fraunces 400 + Inter. Gold is the single reserved accent; it detonates only in the footer block. ========================================================================== */ /* ---- Tokens ------------------------------------------------------------- */ :root { /* surfaces */ --paper: #F5F2EB; /* primary warm-white canvas */ --paper-pure: #FFFFFF; --ink: #15130F; /* warm near-black: text + the one dark section */ --ink-2: #1C1A15; /* the reserved accent */ --gold: #9A7A1C; /* accent on light (links, strokes, counter mark) */ --gold-deep: #7A6116; /* gold for sub-19px text — AA on paper & white */ --gold-block: #C9A227; /* the footer detonation field */ --gold-bright: #C9A227; /* hover */ /* text */ --body: #6B675E; /* body gray on paper */ --lead-in: #8A8270; /* two-tone headline lead-in (warm gray, ≥3:1) */ --on-ink: #F3EFE6; /* text on dark section */ --on-ink-2: #B6B0A2; /* muted text on dark */ /* lines */ --hair: rgba(21,19,15,.14); --hair-strong: rgba(21,19,15,.26); --hair-on-ink: rgba(243,239,230,.16); /* system */ --r: 14px; /* media/card radius */ --maxw: 1520px; --gut: 24px; --margin: clamp(20px, 5vw, 56px); --sect: clamp(84px, 12vh, 168px); /* section vertical padding */ --font-serif: "Fraunces", "Times New Roman", Georgia, serif; --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; --ease: cubic-bezier(.16, 1, .3, 1); --ease-slide: cubic-bezier(.22, 1, .36, 1); } /* ---- Reset -------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } html, body { overflow-x: clip; } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-sans); font-size: 17px; line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, svg { display: block; max-width: 100%; } figure { margin: 0; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; } ::selection { background: var(--gold-block); color: var(--ink); } /* keyboard focus — same accent language as hover, visible everywhere */ a:focus-visible, button:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; } .ink-section :focus-visible { outline-color: var(--on-ink); } .brandblock :focus-visible, .brandfoot :focus-visible { outline-color: var(--ink); } /* skip link (first element in ) */ .skip { position: fixed; left: 12px; top: 12px; z-index: 100; background: var(--paper); color: var(--ink); padding: 12px 20px; border: 1px solid var(--hair-strong); border-radius: 8px; transform: translateY(-200%); } .skip:focus { transform: none; } /* ---- Display type ------------------------------------------------------- */ .display, .h-sect, .h-sub, .h-card, .h-foot { font-family: var(--font-serif); font-weight: 400; font-variation-settings: "opsz" 144, "wght" 400, "SOFT" 0, "WONK" 0; letter-spacing: -0.014em; margin: 0; text-wrap: balance; } .display { font-size: clamp(52px, 7.2vw, 116px); line-height: 1.02; letter-spacing: -0.022em; } .h-sect { font-size: clamp(42px, 5.2vw, 82px); line-height: 1.04; letter-spacing: -0.018em; } .h-sub { font-size: clamp(34px, 4.1vw, 64px); line-height: 1.07; } .h-card { font-size: clamp(27px, 2.7vw, 43px); line-height: 1.08; letter-spacing: -0.01em; } .h-foot { font-size: clamp(34px, 4.5vw, 72px); line-height: 1.1; } /* two-tone headline */ .tt-lead { color: var(--lead-in); } /* the one gold word inside light-canvas display type */ .acc { font-style: normal; color: var(--gold); } /* ---- Sans roles --------------------------------------------------------- */ .lead { font-size: clamp(18px, 1.45vw, 21px); line-height: 1.5; color: var(--body); max-width: 46ch; margin: 0; } .label { font-size: 15px; font-weight: 500; letter-spacing: .01em; line-height: 1.2; } .counter{ font-family: var(--font-serif); font-variation-settings:"opsz" 40,"wght" 400; font-size: 20px; letter-spacing: .02em; color: var(--body); } .legal { font-size: 14px; color: var(--body); } /* ---- Layout primitives -------------------------------------------------- */ .wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--margin); } .bleed-right { padding-right: 0; } .section { padding-block: var(--sect); } /* dark section */ .ink-section { background: var(--ink); color: var(--on-ink); } .ink-section .lead { color: var(--on-ink-2); } .ink-section .tt-lead { color: var(--on-ink-2); } .ink-section .counter { color: var(--on-ink-2); } /* ---- Pill button -------------------------------------------------------- */ .pill { display: inline-flex; align-items: center; gap: 14px; padding: 15px 26px; border-radius: 999px; border: 1px solid var(--hair-strong); font-size: 17px; font-weight: 500; color: var(--ink); background: transparent; transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease); white-space: nowrap; } .pill .arr { transition: transform .22s var(--ease); } .pill:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); } .pill:hover .arr { transform: translateX(5px); } .ink-section .pill { border-color: var(--hair-on-ink); color: var(--on-ink); } .ink-section .pill:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); } .pill--gold { border-color: var(--gold); color: var(--gold); } .pill--gold:hover { background: var(--gold-block); color: var(--ink); border-color: var(--gold-block); } /* ink pill that lives ON the gold block — hover must actually change */ .pill--ink-on-gold { border-color: var(--ink); color: var(--ink); } .pill--ink-on-gold:hover { background: var(--ink); color: var(--gold-block); border-color: var(--ink); } .arr { width: 22px; height: 14px; } /* round icon arrow (carousel controls) */ .navbtn { width: 56px; height: 56px; border-radius: 999px; border: 1px solid var(--hair-strong); display: inline-grid; place-items: center; transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease); } .navbtn:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); } .navbtn[aria-disabled="true"] { opacity: .3; cursor: default; } .navbtn[aria-disabled="true"]:hover { background: transparent; color: inherit; border-color: var(--hair-strong); } .ink-section .navbtn { border-color: var(--hair-on-ink); } .ink-section .navbtn:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); } /* section header grammar: title+lead left, controls right */ .sect-head { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 32px; } .sect-head .stack { display: flex; flex-direction: column; gap: 22px; max-width: 60ch; } .sect-head .controls { display: flex; align-items: center; gap: 16px; } /* ============================================================================ NAV ========================================================================== */ .nav { position: sticky; top: 0; z-index: 50; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 40px; padding: 22px var(--margin); background: color-mix(in srgb, var(--paper) 82%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid transparent; transition: padding .3s var(--ease), background .3s var(--ease), border-color .3s var(--ease); } .nav.is-stuck { padding-block: 14px; border-bottom-color: var(--hair); background: color-mix(in srgb, var(--paper) 94%, transparent); } .brand { display: flex; align-items: baseline; gap: 10px; font-family: var(--font-serif); font-variation-settings:"opsz" 40; font-size: 25px; letter-spacing: .14em; text-transform: uppercase; } .brand .mk { color: var(--gold); } .brand .hex { width: 25px; height: 27px; color: var(--gold); flex: none; align-self: center; } .nav-links { display: flex; gap: 34px; justify-self: start; } .nav-links a { font-size: 17px; font-weight: 500; position: relative; padding-block: 4px; } .nav-links a::after { content:""; position:absolute; left:0; bottom:0; height:1.5px; width:0; background: var(--gold); transition: width .3s var(--ease); } .nav-links a:hover::after, .nav-links a:focus-visible::after { width: 100%; } .nav-right { display: flex; align-items: center; gap: 26px; justify-self: end; } .nav-right > a:not(.pill) { padding-block: 8px; } /* mobile menu (hidden ≥861px) */ .menubtn { display: none; font-size: 14px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; padding: 10px 4px; } .mobile-menu { display: none; grid-column: 1 / -1; padding: 14px 0 10px; border-top: 1px solid var(--hair); } .mobile-menu a { display: block; font-family: var(--font-serif); font-variation-settings: "opsz" 40; font-size: 27px; padding-block: 10px; } /* ============================================================================ S1 HERO — two-tone serif over the sketch-to-built render (16:9) ========================================================================== */ .hero { padding-top: clamp(40px, 6vh, 80px); padding-bottom: var(--sect); } .hero .display { max-width: 17ch; } .hero .lead { margin-top: 30px; } .hero .cta { margin-top: 40px; display: flex; gap: 16px; align-items: center; } .hero-media { margin-top: clamp(48px, 7vh, 96px); position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--r); overflow: hidden; background: #0c1115; border: 1px solid var(--hair); } .hero-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; will-change: transform; /* parallax */ } .hero-media .seal { position: absolute; left: 26px; bottom: 24px; z-index: 2; display: flex; align-items: center; gap: 12px; color: var(--on-ink); font-size: 15px; letter-spacing: .02em; background: color-mix(in srgb, var(--ink) 62%, transparent); backdrop-filter: blur(3px); padding: 10px 16px; border-radius: 999px; } .hero-media .seal .dot { width: 26px; height: 26px; border-radius: 999px; border: 1.5px solid var(--gold-bright); display: grid; place-items: center; color: var(--gold-bright); } @media (max-width: 720px){ .hero-media { aspect-ratio: 4 / 3; } } /* ============================================================================ S2 TRANSFORMATION — sparse split: one oversized line left, bleeding image right ========================================================================== */ .transform { display: grid; grid-template-columns: 1.05fr 1.25fr; align-items: center; gap: clamp(32px, 6vw, 96px); } .transform .h-sub { max-width: 15ch; } .transform .meta { margin-top: 40px; display: flex; flex-wrap: wrap; gap: clamp(28px,3.5vw,56px); border-top: 1px solid var(--hair); padding-top: 30px; } .transform .meta .n { font-family: var(--font-serif); font-variation-settings:"opsz" 144; font-size: clamp(38px,4vw,60px); line-height: .98; letter-spacing: -.02em; } .transform .meta .k { font-size: 14px; color: var(--body); margin-top: 12px; max-width: 16ch; } .transform .figure { position: relative; aspect-ratio: 16 / 10; border-radius: var(--r); overflow: hidden; background: #0b0f08; border: 1px solid var(--hair); margin-right: calc(var(--margin) * -1); /* bleed past the right margin */ } .transform .figure img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; } .transform .figure .fc { position: absolute; left: 0; bottom: 0; z-index: 2; margin: 0; padding: 14px 20px; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--on-ink); background: linear-gradient(0deg, rgba(8,10,7,.78), transparent); width: 100%; } /* ============================================================================ S3 QUESTIONS — the one dark section. image-backed question cards ========================================================================== */ .cards3 { margin-top: clamp(48px, 6vh, 80px); display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gut); } .qcard { position: relative; border-radius: var(--r); overflow: hidden; aspect-ratio: 0.9; padding: 28px; display: flex; flex-direction: column; justify-content: flex-end; color: var(--paper); background: #11140f; border: 1px solid var(--hair-on-ink); } .qcard img.bg { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); } .qcard::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(10,12,15,0) 28%, rgba(10,12,15,.5) 62%, rgba(7,9,11,.9) 100%); } .qcard > * { position: relative; z-index: 2; } .qcard .label { color: var(--gold-block); } .qcard .h-card { color: #fff; margin-top: 12px; max-width: 15ch; } .qcard .read { margin-top: 18px; display: inline-flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 500; color: rgba(255,255,255,.92); } .qcard:hover img.bg { transform: scale(1.045); } /* ============================================================================ S4 DETAIL ENGINE — one monumental artifact, near full-bleed ========================================================================== */ .detail .cap { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 32px; margin-bottom: 44px; } .detail .cap .h-sub { max-width: 20ch; } .detail-art { border-radius: var(--r); overflow: hidden; border: 1px solid var(--hair); background: var(--paper-pure); } .detail-art img { width: 100%; height: auto; display: block; } .detail-cap { margin-top: 32px; display: grid; grid-template-columns: 1fr 1.5fr; gap: clamp(24px,4vw,64px); align-items: start; } .detail-cap .chips { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 28px; } .detail-cap .chips span { font-size: 15px; color: var(--body); display: flex; gap: 12px; align-items: baseline; padding-top: 14px; border-top: 1px solid var(--hair); } .detail-cap .chips b { font-variant-numeric: tabular-nums; color: var(--gold-deep); font-weight: 600; } /* ============================================================================ S5 GALLERY — bleeding carousel of real generated sheets (landscape ARCH-D) ========================================================================== */ .rail { margin-top: clamp(40px, 5vh, 64px); } .rail-track { display: grid; grid-auto-flow: column; grid-auto-columns: clamp(340px, 38vw, 560px); gap: var(--gut); overflow-x: auto; scroll-snap-type: x mandatory; padding-right: var(--margin); scrollbar-width: none; } .rail-track::-webkit-scrollbar { display: none; } .sheet { scroll-snap-align: start; } .sheet .pane { aspect-ratio: 3 / 2; border-radius: var(--r); overflow: hidden; background: var(--paper-pure); border: 1px solid var(--hair); transition: transform .5s var(--ease), box-shadow .5s var(--ease); } .sheet .pane img { width: 100%; height: 100%; object-fit: cover; display: block; } .sheet:hover .pane { transform: translateY(-6px); box-shadow: 0 26px 60px -34px rgba(21,19,15,.5); } .sheet .cap { margin-top: 18px; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; } .sheet .cap .t { font-family: var(--font-serif); font-variation-settings:"opsz" 40; font-size: 22px; } .sheet .cap .n { font-size: 13px; letter-spacing: .12em; color: var(--body); } /* ============================================================================ S6 PROOF / TESTIMONIAL — portrait + typographic quote ========================================================================== */ .testi { background: var(--paper-pure); border-block: 1px solid var(--hair); } .testi-head { display: flex; flex-direction: column; gap: 18px; margin-bottom: clamp(36px,5vh,60px); } .testi-head .label { color: var(--gold-deep); } .testi-grid { display: grid; grid-template-columns: minmax(280px, 360px) 1fr; gap: clamp(44px, 6vw, 100px); align-items: center; } .testi-portrait { border-radius: var(--r); overflow: hidden; border: 1px solid var(--hair); box-shadow: 0 40px 90px -50px rgba(21,19,15,.45); } .testi-portrait img { width: 100%; height: auto; display: block; } .testi-quote { margin: 0; position: relative; } .testi-quote::before { content: "\201C"; display: block; font-family: var(--font-serif); font-variation-settings: "opsz" 144, "wght" 400; font-size: 110px; line-height: .4; color: var(--hair-strong); margin-bottom: 30px; } .testi-quote p { font-family: var(--font-serif); font-variation-settings: "opsz" 144, "wght" 400; font-size: clamp(34px, 3.8vw, 56px); line-height: 1.12; letter-spacing: -0.016em; color: var(--ink); margin: 0; max-width: 17ch; } .testi-quote .qsub { font-family: var(--font-sans); font-variation-settings: normal; font-size: 19px; line-height: 1.65; letter-spacing: 0; color: var(--body); margin-top: 26px; max-width: 44ch; } .testi-quote footer { margin-top: 40px; padding-top: 26px; border-top: 1px solid var(--hair); display: flex; flex-direction: column; gap: 4px; } .testi-quote footer b { font-size: 16px; font-weight: 600; color: var(--ink); } .testi-quote footer span { font-size: 14px; letter-spacing: .08em; text-transform: uppercase; color: var(--body); } /* ============================================================================ S7 INSIDE — asymmetric editorial mosaic (1 image-led + 2 text-led) ========================================================================== */ .mosaic { margin-top: clamp(40px,5vh,64px); display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(28px,4vw,64px); } .mosaic .feature .frame { aspect-ratio: 16/10; border-radius: var(--r); overflow: hidden; border: 1px solid var(--hair); background: #11140f; } .mosaic .feature .frame img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); } .mosaic .feature:hover .frame img { transform: scale(1.04); } .mosaic .feature .h-card { margin-top: 26px; max-width: 18ch; } .mosaic .list { display: flex; flex-direction: column; } .mosaic .item { padding: 30px 0; border-top: 1px solid var(--hair); } .mosaic .item:last-child { border-bottom: 1px solid var(--hair); } .mosaic .item .label { color: var(--body); } .mosaic .item .h-card { font-size: clamp(24px,2vw,32px); margin-top: 12px; max-width: 22ch; } .mosaic .item .lead { margin-top: 14px; font-size: 17px; } /* ============================================================================ S8 PLATFORM — device + deliverables ========================================================================== */ .platform { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px,6vw,96px); align-items: center; } .pf-media { border-radius: var(--r); overflow: hidden; border: 1px solid var(--hair); background: linear-gradient(160deg,#23211c,#15130f); aspect-ratio: 4 / 3; } .pf-media img { width: 100%; height: 100%; object-fit: cover; object-position: center; } .pf-copy .h-sect { margin-top: 14px; } .pf-copy .lead { margin-top: 22px; } .pf-copy .label { color: var(--gold-deep); } @media (max-width: 1080px){ .platform { grid-template-columns: 1fr; } .pf-media { aspect-ratio: 16/10; } } /* ============================================================================ S9 BRAND BLOCK — gold detonation (the final chord) ========================================================================== */ .brandblock { background: var(--gold-block); color: var(--ink); } .brandblock .inner { padding-block: clamp(72px,9vh,128px); display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(40px,6vw,96px); } .brandblock .h-foot { max-width: 16ch; } .brandblock .sub { margin-top: 22px; font-size: 18px; max-width: 40ch; color: rgba(21,19,15,.82); } .brandblock .cols { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-self: center; } .brandblock .cols h3 { margin: 0 0 18px; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: rgba(21,19,15,.78); } .brandblock .cols a { display: block; font-family: var(--font-serif); font-variation-settings:"opsz" 40; font-size: 22px; line-height: 1.7; } .brandblock .cols a:hover { text-decoration: underline; text-underline-offset: 4px; } .brandfoot { background: var(--gold-block); color: var(--ink); } .brandfoot .inner { padding-bottom: 40px; } .brandfoot .rule { height:1px; background: rgba(21,19,15,.22); margin-bottom: 26px; } .brandfoot .wm { font-family: var(--font-serif); font-variation-settings:"opsz" 144; font-size: clamp(40px, 6.5vw, 96px); letter-spacing: .12em; line-height: 1; margin-bottom: 30px; } .brandfoot .row { display:flex; justify-content: space-between; align-items:center; gap: 24px; flex-wrap: wrap; } .brandfoot .meta { display:flex; gap: 28px; flex-wrap: wrap; font-size: 14px; } .brandfoot .legal { color: rgba(21,19,15,.8); } /* ============================================================================ Scroll reveal ========================================================================== */ .reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease), transform .7s var(--ease); will-change: transform, opacity; } .reveal.in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; } } .no-anim .reveal { opacity: 1 !important; transform: none !important; } .no-anim *, .no-anim *::before, .no-anim *::after { transition: none !important; animation: none !important; } /* ============================================================================ Stub pages ========================================================================== */ .stub-hero { padding-top: clamp(60px,10vh,140px); padding-bottom: var(--sect); } .stub-hero .display { max-width: 16ch; } .stub-hero .lead { margin-top: 28px; } .stub-note { margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--hair); color: var(--body); max-width: 60ch; } .nb { white-space: nowrap; } /* ============================================================================ Responsive ========================================================================== */ @media (max-width: 1080px) { .transform { grid-template-columns: 1fr; } .transform .figure { margin-right: 0; } .mosaic { grid-template-columns: 1fr; } .brandblock .inner { grid-template-columns: 1fr; } } @media (max-width: 860px) { .nav { gap: 16px; } .nav-links { display: none; } .nav-right { gap: 14px; } .nav-right > a:not(.pill) { display: none; } .menubtn { display: block; } .mobile-menu.open { display: block; } .cards3 { grid-template-columns: 1fr; } .sect-head { grid-template-columns: 1fr; align-items: start; } .sect-head .controls { justify-content: flex-start; } .detail .cap { grid-template-columns: 1fr; align-items: start; } .detail-cap { grid-template-columns: 1fr; } .detail-cap .chips { grid-template-columns: 1fr; } .testi-grid { grid-template-columns: 1fr; } .testi-portrait { max-width: 420px; } .testi-quote { max-width: none; } .brandblock .cols { grid-template-columns: 1fr 1fr; } .brandfoot .meta a { padding-block: 11px; } } @media (max-width: 520px) { .nav { padding-inline: 16px; gap: 10px; } .nav-right { gap: 10px; } .brand { font-size: 18px; gap: 7px; letter-spacing: .1em; } .brand .hex { width: 18px; height: 20px; } .menubtn { font-size: 12px; letter-spacing: .06em; padding-inline: 2px; } .nav .pill { padding: 10px 14px; font-size: 14px; gap: 8px; } .nav .pill .arr { width: 16px; } .hero-media .seal { font-size: 12px; left: 14px; bottom: 14px; right: 14px; } }