/* ===================================================================== SummitBridge — base.css (tokens, reset, architectural typography) Australian Home Improvement, DIY & Renovation Platform ===================================================================== */ :root { --red: #E5402A; --red-deep: #C0301C; --yellow: #F5B62B; --yellow-deep: #E09A12; --warm: #FAF6F0; --concrete: #DED7CC; --graphite: #3A3A3C; --charcoal: #1C1B1A; --ink: #211F1D; --bone: #FFFDF9; --muted: #6B6258; --line: rgba(28,27,26,.14); --line-strong: rgba(28,27,26,.28); --line-light: rgba(255,255,255,.16); --g-sun: linear-gradient(120deg, #E5402A, #F5B62B); --g-ember: linear-gradient(135deg, #C0301C, #E5402A); --g-char: linear-gradient(165deg, #26241F, #1C1B1A); --g-warm: radial-gradient(120% 120% at 80% 0%, rgba(245,182,43,.22), transparent 55%); --ff-display: 'Archivo', system-ui, -apple-system, sans-serif; --ff-body: 'Inter', system-ui, -apple-system, sans-serif; --maxw: 1280px; --wide: 1440px; --gutter: clamp(20px, 4vw, 48px); --r-sm: 8px; --r-md: 16px; --r-lg: 26px; --r-pill: 999px; --sh-1: 0 16px 40px -24px rgba(28,27,26,.4); --sh-2: 0 36px 80px -38px rgba(28,27,26,.5); --sh-red: 0 22px 50px -24px rgba(229,64,42,.55); --ring: 0 0 0 3px rgba(245,182,43,.55); --ease: cubic-bezier(.2,.7,.2,1); --t: 420ms var(--ease); --t-fast: 200ms var(--ease); } *,*::before,*::after { box-sizing: border-box; } * { margin: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: var(--ff-body); font-size: 17px; line-height: 1.7; color: var(--ink); background: var(--warm); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } img,svg,picture,video { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } ul,ol { list-style: none; padding: 0; } button { font: inherit; background: none; border: none; cursor: pointer; color: inherit; } :focus-visible { outline: none; box-shadow: var(--ring); border-radius: 4px; } ::selection { background: var(--yellow); color: var(--charcoal); } /* ---------- architectural type scale ---------- */ h1,h2,h3,h4,h5 { font-family: var(--ff-display); font-weight: 800; line-height: .98; color: var(--charcoal); letter-spacing: -.03em; } h1 { font-size: clamp(3rem, 8vw, 6.4rem); text-transform: uppercase; } h2 { font-size: clamp(2.2rem, 5vw, 4rem); text-transform: uppercase; } h3 { font-size: clamp(1.4rem, 2.6vw, 2.1rem); letter-spacing: -.02em; } h4 { font-size: 1.18rem; font-weight: 700; letter-spacing: -.01em; } p { color: var(--muted); } .lead { font-size: clamp(1.14rem, 1.8vw, 1.45rem); color: #423b32; line-height: 1.55; } strong { color: var(--ink); font-weight: 600; } /* ---------- editorial label / index ---------- */ .label { display:inline-flex; align-items:center; gap:.6em; font-family: var(--ff-display); font-size:.74rem; font-weight:700; letter-spacing:.24em; text-transform:uppercase; color: var(--red); } .label::before { content:""; width:26px; height:3px; background: var(--yellow); } .label--plain::before { display:none; } .index-num { font-family: var(--ff-display); font-weight:800; font-size:.82rem; letter-spacing:.1em; color: var(--red); } .kicker { font-family: var(--ff-display); font-weight:700; letter-spacing:.2em; text-transform:uppercase; font-size:.72rem; color: var(--muted); } /* ---------- color helpers ---------- */ .on-dark { color: var(--warm); } .on-dark h1,.on-dark h2,.on-dark h3,.on-dark h4 { color: var(--warm); } .on-dark p { color: rgba(250,246,240,.74); } .on-dark .lead { color: rgba(250,246,240,.9); } .on-dark .label { color: var(--yellow); } .t-red { color: var(--red); } .t-yellow { color: var(--yellow-deep); } .t-char { color: var(--charcoal); } .grad-text { background: var(--g-sun); -webkit-background-clip: text; background-clip: text; color: transparent; } .text-balance { text-wrap: balance; } .muted { color: var(--muted); } /* ---------- reading mode (toggled on by reading.js) ---------- */ html.reading-mode body { background: var(--bone); } html.reading-mode .article-body { font-size: 1.12rem; line-height: 1.85; } html.reading-mode [data-reading-hide] { display: none !important; } /* ---------- skip + progress ---------- */ .skip { position:absolute; left:-999px; top:0; background: var(--charcoal); color:#fff; padding:.7em 1.1em; z-index:400; } .skip:focus { left:0; } .read-bar { position:fixed; top:0; left:0; height:4px; width:0; background: var(--g-sun); z-index:300; transition: width 80ms linear; } @media (prefers-reduced-motion: reduce){ *{ animation:none!important; transition:none!important; scroll-behavior:auto!important; } }