/* ============================================================ Skye Yoga Penang — one stylesheet, no framework, no CDN. Order: font → tokens → reset → layout → nav → modal → typography → components → footer → small screens. Comments explain WHY a number exists, not what it does. ============================================================ */ /* ---------- font ---------- */ /* One variable-weight latin subset (32 KB) replaces four static weights and one third-party DNS lookup. Preloaded in with crossorigin. */ @font-face { font-family: Outfit; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/outfit-latin.woff2") format("woff2"); } /* ---------- design tokens ---------- */ :root { --clay: #c2603c; /* primary accent: h1, links, active nav, focus */ --clay-dark: #a24c2d; /* accent hover only */ --green: #4f8a5b; /* affirmative: "yes" cells, blockquote rule */ --teal: #2f6d78; /* data emphasis: table headers, figures, levels */ --ink: #2c2a28; /* body text — near-black, never #000 */ --muted: #6b6660; /* secondary text, labels, footer */ --rule: #e3ddd5; /* all 1px borders */ --stripe: #f7f3ee; /* zebra rows, hover chips, note/quote fills */ --page: #fffdfa; /* page and surface background */ --max: 900px; /* content measure */ --banner-max: 1920px; /* banner stops growing here */ } /* Role discipline: clay = action and navigation state, teal = quantities and identifiers, green = success, red = negative, muted = labels. Never reuse the accent for data. #d24b3f (destructive / "no", modal close) and #ece6dd (table row hover) appear once each and are semantic, not brand, so they are deliberately not tokenised. */ /* ---------- reset and page frame ---------- */ *, *::before, *::after { box-sizing: border-box; } body { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; /* dvh handles collapsing mobile browser chrome; vh is the fallback */ margin: 0; background: var(--page); color: var(--ink); font-family: Outfit, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size: 17px; /* larger than the usual 16px — the reason long pages stay readable */ line-height: 1.6; } .container { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 20px; } /* ---------- masthead ---------- */ .masthead { position: relative; flex: 0 0 auto; /* without this the flex column can compress the aspect box */ aspect-ratio: 2313 / 1000; /* the artwork's real pixel ratio — reserves exact height, zero CLS */ width: 100%; max-width: var(--banner-max); margin-inline: auto; background-image: var(--banner); /* set inline from PHP, with its mtime stamp */ background-position: center top; background-repeat: no-repeat; background-size: 100% auto; } /* The banner is the only element tracking viewport width, and its height derives from that width. Uncapped, a 2560px ultrawide asks for 1107px of banner on a 1080px screen and pushes the menu off the bottom; capping at 1920px and centring makes every display >= 1920px render identically. */ /* ---------- navigation ---------- */ .nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; align-items: center; /* not stretch: each pill sizes from its own padding */ padding: 20px 0 10px; margin-bottom: 30px; position: relative; /* the submenu anchors to the BAR, not to its toggle */ } .nav a, .nav-group-toggle { display: inline-block; padding: 8px 16px; border: 0; border-radius: 4px; background: none; color: var(--ink); font: inherit; font-size: 16px; /* Stated, not inherited: the body's 1.6 and a