/* ============================================================ TTCC — BASE Reset, typeface, custom properties, page themes and the shared layout helpers. Loaded first on every page; every other stylesheet assumes these variables exist. ============================================================ */ /* ============================================================ TYPEFACE One family, two weights. `swap` so text paints in the fallback immediately and re-renders when the file lands. ============================================================ */ @font-face { font-family: "TTCC Sans"; src: url("../assets/fonts/SFPRODISPLAYREGULAR.OTF") format("opentype"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "TTCC Sans"; src: url("../assets/fonts/SFPRODISPLAYMEDIUM.OTF") format("opentype"); font-weight: 500; font-style: normal; font-display: swap; } /* ----- Reset ----- */ * { margin: 0; padding: 0; box-sizing: border-box; } :root { --bg: #000000; --fg: #ffffff; --panel-bg: #0a0a0a; --muted: #777777; /* Shared side gutter. The top bar and the hero slider both read it, so their left and right edges always land on the same vertical line. */ --gutter: 96px; /* Fixed top bar height — the slider starts immediately below it. */ --topbar-h: 76px; /* Signature easings */ --ease-panel: cubic-bezier(0.76, 0, 0.24, 1); --ease-reveal: cubic-bezier(0.33, 1, 0.68, 1); } /* Tightens below 1300px. The top bar, the hero slider and the featured panel all read this one variable for their side padding, so their edges stay aligned at every width without three numbers to keep in sync by hand. */ @media (max-width: 1300px) { :root { --gutter: 20px; } } /* Background lives on only, so it propagates to the canvas and a per-page theme class can override it. */ body { background: var(--bg); color: var(--fg); } /* The one place the stack is declared — everything else inherits it. 400 is the default; the 500 cuts are called out where they belong. */ body { font-family: "TTCC Sans", -apple-system, "Helvetica Neue", Arial, sans-serif; font-weight: 400; letter-spacing: -0.02em; -webkit-font-smoothing: antialiased; min-height: 100vh; } a { color: inherit; text-decoration: none; } /* Lock scroll while the menu or the search overlay is open */ body.is-open, body.search-open { overflow: hidden; } /* ============================================================ ICON BUTTON FOCUS A click leaves :focus on the button, and the UA paints a ring that then sits there until something else takes focus. These drop it for pointer input and bring it back for the keyboard, where it is the only thing marking position. ============================================================ */ .topnav__search, .topbar__search, .search-close, .menu-toggle, .search-field__submit { outline: none; border: none; -webkit-tap-highlight-color: transparent; } .topnav__search:focus, .topbar__search:focus, .search-close:focus, .menu-toggle:focus, .search-field__submit:focus, .topnav__search:active, .topbar__search:active, .search-close:active, .menu-toggle:active, .search-field__submit:active { outline: none; border: none; background: none; box-shadow: none; } /* Keyboard only — must follow the :focus rule above to win. */ .topnav__search:focus-visible, .topbar__search:focus-visible, .search-close:focus-visible, .menu-toggle:focus-visible, .search-field__submit:focus-visible { outline: 1px solid currentColor; outline-offset: 2px; } /* ============================================================ LIGHT THEME — index.html only (body.home) Scoped so works.html keeps its dark treatment untouched. The menu panel and the slider's own media stay dark. ============================================================ */ body.home { background: #ffffff; color: #111111; } /* Top bar reads dark on the white page */ body.home .topbar__brand, body.home .topnav__link, body.home .topnav__search, body.home .topbar__search, body.home .menu-toggle { color: #111111; } /* ...but flips back to light while it sits over the open dark panel */ body.home.is-open .menu-toggle { color: #ffffff; } /* Menu panel stays dark, so its text stays light */ body.home .menu-panel { color: #ffffff; } /* ============================================================ SHELL — the site-wide horizontal rhythm. Every row that must align on the same vertical edges uses it: top bar, hero CTA row, strip caption row. ============================================================ */ .shell { width: 100%; max-width: 1560px; margin: 0 auto; /* Only the horizontal sides, so callers keep their own vertical padding. */ padding-left: 64px; padding-right: 64px; } @media (max-width: 1200px) { .shell { padding-left: 40px; padding-right: 40px; } } @media (max-width: 700px) { .shell { padding-left: 24px; padding-right: 24px; } } /* ============================================================ TYPOGRAPHIC ACCENT Third character of "TTCC" leans like an italic. Shared by the top bar brand on every page. ============================================================ */ .wm-accent { font-style: italic; /* Synthetic oblique fallback when the font has no true italic. */ display: inline-block; transform: skewX(-11deg); transform-origin: 50% 60%; /* Optical spacing so the lean doesn't collide with neighbours. */ margin-right: 0.02em; margin-left: 0.01em; }