/* ============================================================ The Greatest Rivalry — core stylesheet Theme is switched by setting data-theme="sa" | "nz" on . ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Libre+Caslon+Text:ital,wght@0,400;0,700;1,400&family=Inter:wght@500;600;700&display=swap'); :root { --font-serif: 'Libre Caslon Text', Georgia, 'Times New Roman', serif; --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; /* South Africa theme (default) */ --sa-bg: #122921; --sa-bg-alt: #0e211a; --sa-accent: #CAA76A; --sa-accent-soft: #CAA76A; --sa-cream: #efe6d2; --sa-text: #EFE5D1; --sa-text-dim: #EFE5D1; --sa-input-bg: #efe6d2; --sa-input-text: #122921; --sa-btn-bg: #CAA76A; --sa-btn-text: #14251e; --sa-border: rgba(239, 230, 210, 0.25); /* New Zealand theme */ --nz-bg: #0a0a0a; --nz-bg-alt: #050505; --nz-accent: #BDBDBD; --nz-accent-soft: #d9d9d9; --nz-cream: #d9d9d9; --nz-text: #BDBDBD; --nz-text-dim: #BDBDBD; --nz-input-bg: #d9d9d9; --nz-input-text: #0a0a0a; --nz-btn-bg: #d9d9d9; --nz-btn-text: #0a0a0a; --nz-border: rgba(255, 255, 255, 0.25); } html[data-theme="sa"] { --bg: var(--sa-bg); --bg-alt: var(--sa-bg-alt); --accent: var(--sa-accent); --accent-soft: var(--sa-accent-soft); --cream: var(--sa-cream); --text: var(--sa-text); --text-dim: var(--sa-text-dim); --input-bg: var(--sa-input-bg); --input-text: var(--sa-input-text); --btn-bg: var(--sa-btn-bg); --btn-text: var(--sa-btn-text); --border: var(--sa-border); } html[data-theme="nz"] { --bg: var(--nz-bg); --bg-alt: var(--nz-bg-alt); --accent: var(--nz-accent); --accent-soft: var(--nz-accent-soft); --cream: var(--nz-cream); --text: var(--nz-text); --text-dim: var(--nz-text-dim); --input-bg: var(--nz-input-bg); --input-text: var(--nz-input-text); --btn-bg: var(--nz-btn-bg); --btn-text: var(--nz-btn-text); --border: var(--nz-border); } *, *::before, *::after { box-sizing: border-box; } /* Smooth color cross-fade whenever the SA/NZ theme toggle swaps CSS variables. */ body, .stage-panel, .brand__title, .eyebrow, .headline, .copy, .theme-toggle__btn, .btn-primary, .btn-secondary, #shareWhatsapp svg, .btn-link-back, .field input, .field select, .field--select::after, .consent, .form-note, .panel-footer, .panel-footer a, .panel-footer__logo, .form-status { transition: background-color .4s ease, color .4s ease, border-color .4s ease; } html, body { margin: 0; padding: 0; height: 100%; background: var(--bg); color: var(--text); font-family: var(--font-sans); font-weight: 500; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; } /* * Fluid root sizing: every rem-based size in this file (font-size, padding, * margin, gap, icon/button dimensions, border-radius...) is relative to this, * so the whole layout scales continuously with viewport width like a poster * being resized, instead of jumping between fixed breakpoint sizes. Passes * exactly through 16px at the 1920px reference this design was built against, * scales down toward 14px at the 900px desktop breakpoint, and grows gently * beyond 1920 for larger monitors. Mobile (<900px) keeps the browser default * (16px) — that layout was tuned independently and shouldn't shrink further. */ @media (min-width: 900px) { html { font-size: clamp(0.875rem, 0.7647rem + 0.196vw, 1.35rem); } } img { max-width: 100%; display: block; } button { font-family: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; } a { color: inherit; } .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* ---------------- Layout shell ---------------- */ .app { display: flex; min-height: 100vh; min-height: 100dvh; } .stage-media { position: relative; flex: 1 1 62%; background: #000; overflow: hidden; min-height: 45vh; } .stage-media__track { position: absolute; inset: 0; transition: opacity .3s ease; } .stage-media__track.is-fading { opacity: 0; } .stage-media__slide { position: absolute; inset: 0; opacity: 0; transition: opacity .5s ease; pointer-events: none; } .stage-media__slide.is-active { opacity: 1; pointer-events: auto; } .stage-media__slide img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; } .stage-media__slide.is-placeholder { display: flex; align-items: center; justify-content: center; background: linear-gradient(160deg, #2a2a2a, #111); color: #888; font-family: var(--font-sans); font-size: .75rem; letter-spacing: .05em; text-align: center; padding: 2rem; } .stage-media__arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 4.2vh; height: 4.2vh; border-radius: 50%; border: 1.5px solid var(--accent-soft, #d8bd7c); background: rgba(10, 12, 10, .2); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); color: var(--accent-soft, #d8bd7c); font-size: 1.2rem; display: flex; align-items: center; justify-content: center; z-index: 5; transition: transform .15s ease, background .15s ease, border-color .4s ease, color .4s ease; } #mediaPrev { left: 1.5rem; transform: translateY(-50%); } #mediaNext { right: 1.5rem; transform: translateY(-50%); } .stage-media__arrow:hover { background: rgba(10, 12, 10, .4); transform: translateY(-50%) scale(1.05); } .stage-media__arrow:active { transform: translateY(-50%) scale(.95); } .stage-panel { flex: 1 1 38%; background: var(--bg); color: var(--text); display: flex; flex-direction: column; padding: 3vh; min-width: 37vw; max-width: 37vw; } .brand { display: flex; align-items: center; gap: .85rem; margin-bottom: 4vh; padding-left: 2.5vh; } .brand__mark { width: 10vh; height: 9vh; flex-shrink: 0; } .brand__mark img { width: 100%; height: 100%; object-fit: contain; } .brand__title { font-family: var(--font-serif); font-weight: 700; font-size: 2.75vh; line-height: 1.15; letter-spacing: .01em; color: var(--accent); text-transform: uppercase; } .panel-body { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; } .panel-view { display: none; flex-direction: column; } .panel-view.is-active { display: flex; } .eyebrow { font-family: var(--font-sans); font-weight: 700; font-size: 1.65vh; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin: 0 0 1rem; padding-left: 2.5vh; } .headline { font-family: var(--font-sans); font-weight: 500; font-size: 1.5vh; line-height: 1.3; margin: 0 0 1.1rem; padding-left: 2.5vh; } .copy { font-size: 1.5vh; line-height: 1.3; color: var(--text); margin: 0 0 1.1rem; padding-left: 2.5vh; } .copy:last-of-type { margin-bottom: 2.75rem; } .copy strong { color: var(--accent-soft); } /* ---------------- Theme toggle (teaser slide) ---------------- */ .theme-toggle { display: flex; border: 1px solid var(--border); margin-bottom: 1rem; } .theme-toggle__btn { flex: 1; background: transparent; border: none; color: var(--text); font-family: var(--font-sans); font-weight: 700; font-size: 1.5vh; letter-spacing: .06em; padding: .95rem .5rem; text-transform: uppercase; transition: background .15s ease, color .15s ease; } .theme-toggle__btn+.theme-toggle__btn { border-left: 1px solid var(--border); } .theme-toggle__btn.is-selected { background: var(--cream); color: var(--bg); } /* ---------------- Buttons ---------------- */ .btn-primary { display: block; width: 100%; border: none; background: var(--btn-bg); color: var(--btn-text); font-family: var(--font-sans); font-weight: 700; font-size: 1.5vh; letter-spacing: .08em; text-transform: uppercase; padding: 1.05rem 1rem; text-align: center; transition: filter .15s ease; } .btn-primary:hover { filter: brightness(1.06); } .btn-primary:active { filter: brightness(.95); } .btn-primary:disabled { opacity: .55; cursor: not-allowed; } .btn-secondary { display: flex; align-items: center; justify-content: center; gap: .6rem; width: 100%; border: 1px solid var(--accent); background: transparent; color: var(--accent); font-family: var(--font-sans); font-weight: 700; font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; padding: 1vh; margin-bottom: 1vh; transition: background .15s ease, color .4s ease, border-color .4s ease; } .btn-secondary:hover { background: rgba(255, 255, 255, .06); } /* Share on WhatsApp: cream fill, dark text, but the icon keeps its own accent-gold color rather than matching the text (matches the exported asset). */ .btn-fill-cream { background: var(--cream); color: var(--bg); border-color: var(--cream); } .btn-fill-cream:hover { filter: brightness(1.05); background: var(--cream); } #shareWhatsapp svg { color: var(--accent); } /* Copy Link: accent fill, dark text/icon (matches the exported asset). */ .btn-fill-accent { background: var(--btn-bg); color: var(--btn-text); border-color: var(--btn-bg); } .btn-fill-accent:hover { filter: brightness(1.05); background: var(--btn-bg); } .btn-link-back { background: none; border: none; color: var(--text-dim); font-family: var(--font-sans); font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; padding: 0 0 1.25rem; align-self: flex-start; padding-left: 2.5vh; } /* ---------------- Form ---------------- */ .form-fields { display: flex; flex-direction: column; gap: 1vh; margin-bottom: 1.1rem; margin-top: 2rem; } .field { position: relative; } .field input[type="email"], .field select { width: 100%; appearance: none; -webkit-appearance: none; border: none; background: var(--input-bg); color: var(--input-text); font-family: var(--font-sans); font-weight: 600; font-size: 1.5vh; padding: 1.5vh; } .field input[type="email"]::placeholder { color: var(--input-text); opacity: .8; font-weight: 600; } .field select { cursor: pointer; } .field--select::after { content: ""; position: absolute; right: 1.1rem; top: 50%; width: .55rem; height: .55rem; border-right: 2px solid var(--input-text); border-bottom: 2px solid var(--input-text); transform: translateY(-70%) rotate(45deg); pointer-events: none; opacity: .75; } .field-error { font-size: .72rem; color: #e07a5f; margin-top: .3rem; display: none; } .field.has-error select, .field.has-error input { outline: 2px solid #e07a5f; } .field.has-error .field-error { display: block; } .consent { display: flex; align-items: center; gap: .6rem; margin-top: 2vh; margin-bottom: 2vh; font-size: 1.25vh; line-height: 1; color: var(--text-dim); } .consent input[type="checkbox"] { margin-top: .2rem; width: 1rem; flex-shrink: 0; accent-color: var(--accent); } .consent a { color: var(--accent-soft); text-decoration: underline; } .form-note { font-size: .72rem; color: var(--text-dim); margin-top: -.4rem; margin-bottom: .5rem; } .form-status { font-size: .8rem; margin-top: .75rem; display: none; } .form-status.is-visible { display: block; } .form-status.is-error { color: #e07a5f; } .form-status.is-success { color: var(--accent-soft); } /* ---------------- Thank-you / share view ---------------- */ .share-list { margin-top: .25rem; } .priority-note { display: flex; align-items: center; gap: .6rem; font-size: .78rem; color: var(--text-dim); margin-top: 1rem; } /* ---------------- Footer ---------------- */ .panel-footer { margin-top: auto; padding-top: 7vh; display: flex; justify-content: space-between; align-items: center; gap: 1rem; font-size: 0.85vh; color: var(--text-dim); letter-spacing: .01em; opacity: 0.75; } .panel-footer a { color: var(--text-dim); text-decoration: underline; } .panel-footer__logo { font-family: var(--font-sans); font-weight: 700; letter-spacing: .04em; color: var(--text-dim); white-space: nowrap; font-size: 1vh; } /* ---------------- Responsive ---------------- */ /* * Mobile sizing lives entirely in this block, independent of the desktop * values above. Edit anything here without touching the desktop rules — * each property below overrides its desktop counterpart only under 900px. */ @media (max-width: 900px) { .app { flex-direction: column; } .stage-media { flex: none; aspect-ratio: 3 / 4; min-height: 0; } .stage-panel { flex: none; max-width: none; min-width: 0; padding: 7.5vw; } .panel-body { justify-content: flex-start; } .brand { padding-left: 0; margin-bottom: 1.5rem; padding-left: 5vw; } .brand__mark { width: 12vh; height: 12vh; } .brand__title { font-size: 3.5vh; } .eyebrow { padding-left: 0; font-size: 4vw; padding-left: 5vw; } .headline { font-size: 4vw !important; padding-left: 0; padding-left: 5vw; } .copy { padding-left: 0; font-size: 4vw; padding-left: 5vw; } .btn-link-back { padding-left: 0; padding-left: 5vw; } .theme-toggle__btn { font-size: 3vw; } .btn-primary { font-size: 3.5vw; } .btn-secondary { font-size: 3vw; padding: 2vw; margin-bottom: 2vh; } .field select { font-size: 4vw; padding: 3vw; } .form-fields { gap: 2vh; } .field input[type="email"], .field select { font-size: 4vw; } .consent { font-size: 3vw; line-height: 1.3; margin-top: 4vh; margin-bottom: 4vh; } .panel-footer { padding-top: 1.5rem; font-size: 2vw; gap: 10vw; } .panel-footer__logo { font-size: 2.5vw; } .policy-page { padding: 10vw !important; } .policy-page h1 { line-height: 1.2 !important; } } @media (max-width: 420px) { .app { flex-direction: column; } .stage-media { flex: none; aspect-ratio: 3 / 4; min-height: 0; } .stage-panel { flex: none; max-width: none; min-width: 0; padding: 7.5vw; } .panel-body { justify-content: flex-start; } .brand { padding-left: 0; margin-bottom: 1.5rem; padding-left: 5vw; } .brand__mark { width: 12vh; height: 12vh; } .brand__title { font-size: 3.5vh; } .eyebrow { padding-left: 0; font-size: 4vw; padding-left: 5vw; } .headline { font-size: 4vw !important; padding-left: 0; padding-left: 5vw; } .copy { padding-left: 0; font-size: 4vw; padding-left: 5vw; } .btn-link-back { padding-left: 0; padding-left: 5vw; } .theme-toggle__btn { font-size: 3vw; } .btn-primary { font-size: 3.5vw; } .btn-secondary { font-size: 3vw; padding: 2vw; margin-bottom: 2vh; } .field select { font-size: 4vw; padding: 3vw; } .form-fields { gap: 2vh; } .field input[type="email"], .field select { font-size: 4vw; } .consent { font-size: 3vw; line-height: 1.3; margin-top: 4vh; margin-bottom: 4vh; } .panel-footer { padding-top: 1.5rem; font-size: 2vw; gap: 10vw; } .panel-footer__logo { font-size: 2.5vw; } .policy-page { padding: 10vw !important; } .policy-page h1 { line-height: 1.2 !important; } } /* ---------------- Privacy policy page ---------------- */ .policy-page { width: 100%; padding: 4vh 3.2vw 6vh; background: var(--sa-cream, #efe6d2); color: #122921; min-height: 100vh; font-family: var(--font-sans); line-height: 1.6; } .policy-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 2rem; margin-bottom: 3vh; } .policy-logo { flex-shrink: 0; display: block; width: 6vh; min-width: 3.5rem; max-width: 5.5rem; } .policy-logo img { width: 100%; height: auto; display: block; } .policy-page h1 { font-family: var(--font-sans); font-weight: 700; font-size: 1.6rem; margin: 0 0 .25rem; } .policy-page .updated { font-size: .8rem; color: #5b5342; margin: 0; } .policy-page h2 { font-family: var(--font-sans); font-weight: 600; font-size: 1.05rem; margin-top: 2.25rem; margin-bottom: .6rem; } .policy-page p, .policy-page li { font-size: .9rem; } .policy-page a { color: #122921; text-decoration: underline; } .policy-page .todo { background: #f7d9c4; padding: .15rem .35rem; font-weight: 700; } .policy-footer { margin-top: 4vh; text-align: right; font-weight: 700; font-size: .68rem; letter-spacing: .04em; color: #5b5342; }