/* ===================================================================== CAMPAIGN PAGE — seasonal advertorial Layout modelled on the nuvaneo advertorial template: one narrow centred column, a dashed frame around every entry, a countdown ranking (#13 → #1), conversational prose, and a plain text CTA link under each entry. Loads AFTER assets/site.css and overrides its tokens per season. The season is chosen with — see the SEASONS block in the page for copy, dates and product data. ===================================================================== */ /* --------------------------------------------------------------------- SEASON PALETTES Each season redefines the same handful of M3 roles. Everything else — spacing, type, components — is shared, so switching season is one attribute and nothing shifts but colour and copy. Explicit theme selectors take priority over the season's default and site.css. --------------------------------------------------------------------- */ /* ---- HALLOWEEN: parchment, burnt pumpkin, plum and moss by default ---- */ :root[data-season="halloween"], :root[data-season="halloween"][data-theme="light"] { color-scheme: light; --md-primary:#C2410C; --md-on-primary:#FFFFFF; --md-primary-container:#FFE0C2; --md-on-primary-container:#3D1500; --md-secondary:#6B2D7A; --md-on-secondary:#FFFFFF; --md-secondary-container:#F3DCFC;--md-on-secondary-container:#2B0A36; --md-tertiary:#4D6B1F; --md-on-tertiary:#FFFFFF; --md-tertiary-container:#D6F0A8; --md-on-tertiary-container:#1A2600; --md-surface:#FFF6EC; --md-on-surface:#2A1B12; --md-surface-variant:#EFE0D2; --md-on-surface-variant:#55463C; --md-surface-c-lowest:#FFFFFF; --md-surface-c-low:#FFF0E0; --md-surface-c:#FCE9D8; --md-surface-c-high:#F7E2CE; --md-surface-c-highest:#F1DBC5; --md-outline:#8A7366; --md-outline-variant:#E0CDB9; --md-inverse-surface:#3A2A1E; --md-inverse-on-surface:#FFEDDD; --md-inverse-primary:#FFB68A; --md-error:#BA1A1A; --md-on-error:#FFFFFF; --md-error-container:#FFDAD6; --md-on-error-container:#410002; --art-1:#C2410C; --art-2:#FFE0C2; --art-3:#E8873A; --art-4:#6B2D7A; --art-5:#4D6B1F; --art-6:#FFD0A3; --mark:#FFD9A0; --mark-ink:#3D1500; --frame:#C2410C; --motif:#C2410C; --motif-2:#6B2D7A; --glow:#FF8A3D; --font-accent:'Jolly Lodger', var(--font-display); /* Jolly Lodger is condensed and single-weight: it needs air and size. */ --accent-weight:400; --accent-track:.012em; --accent-scale:1.12; --accent-lh:1.08; } /* ---- BLACK FRIDAY / CYBER MONDAY: near-black, one electric accent ---- */ :root[data-season="bfcm"], :root[data-season="bfcm"][data-theme="dark"] { color-scheme: dark; --md-primary:#D8FF4F; --md-on-primary:#232B00; --md-primary-container:#3D4A00; --md-on-primary-container:#EBFF9C; --md-secondary:#C7C8BB; --md-on-secondary:#2F3128; --md-secondary-container:#45483E;--md-on-secondary-container:#E3E4D6; --md-tertiary:#FF5A5F; --md-on-tertiary:#4A0005; --md-tertiary-container:#8C1017; --md-on-tertiary-container:#FFDAD9; --md-surface:#0C0D0A; --md-on-surface:#E5E3DC; --md-surface-variant:#46483E; --md-on-surface-variant:#C7C8BB; --md-surface-c-lowest:#070803; --md-surface-c-low:#141510; --md-surface-c:#181A14; --md-surface-c-high:#22241E; --md-surface-c-highest:#2D2F28; --md-outline:#919388; --md-outline-variant:#46483E; --md-inverse-surface:#E5E3DC; --md-inverse-on-surface:#2F3128; --md-inverse-primary:#506000; --md-error:#FFB4AB; --md-on-error:#690005; --md-error-container:#93000A; --md-on-error-container:#FFDAD6; --art-1:#D8FF4F; --art-2:#3D4A00; --art-3:#A8C93B; --art-4:#FF5A5F; --art-5:#5B6B00; --art-6:#232B00; --mark:#4A5A00; --mark-ink:#EBFF9C; --frame:#D8FF4F; --motif:#D8FF4F; --motif-2:#FF5A5F; --glow:#D8FF4F; --font-accent:var(--font-display); /* stark type IS the Black Friday look */ --accent-weight:800; --accent-track:-.03em; --accent-scale:1.0; --accent-lh:1.15; } /* ---- CHRISTMAS: deep pine and warm gold on bone, not the usual red ---- */ :root[data-season="christmas"], :root[data-season="christmas"][data-theme="light"] { color-scheme: light; --md-primary:#0B5138; --md-on-primary:#FFFFFF; --md-primary-container:#9EF2CC; --md-on-primary-container:#00210F; --md-secondary:#4C6358; --md-on-secondary:#FFFFFF; --md-secondary-container:#CEE9D9;--md-on-secondary-container:#092017; --md-tertiary:#8A6100; --md-on-tertiary:#FFFFFF; --md-tertiary-container:#FFDF9B; --md-on-tertiary-container:#2B1D00; --md-surface:#FDFAF2; --md-on-surface:#1A1C19; --md-surface-variant:#DCE5DD; --md-on-surface-variant:#414942; --md-surface-c-lowest:#FFFFFF; --md-surface-c-low:#F4F5EC; --md-surface-c:#EEF0E6; --md-surface-c-high:#E8EBE0; --md-surface-c-highest:#E2E5DA; --md-outline:#717971; --md-outline-variant:#C0C9C1; --md-inverse-surface:#2F312D; --md-inverse-on-surface:#F0F1EA; --md-inverse-primary:#99D8B5; --md-error:#BA1A1A; --md-on-error:#FFFFFF; --md-error-container:#FFDAD6; --md-on-error-container:#410002; --art-1:#0B5138; --art-2:#9EF2CC; --art-3:#2F7D5C; --art-4:#E0B252; --art-5:#8A6100; --art-6:#CEE9D9; --mark:#FFDF9B; --mark-ink:#2B1D00; --frame:#0B5138; --motif:#0B5138; --motif-2:#A8232E; --glow:#2F7D5C; --font-accent:'Almendra', Georgia, serif; /* Almendra has a real 700, so it can carry a headline at normal size. */ --accent-weight:700; --accent-track:-.005em; --accent-scale:1.0; --accent-lh:1.14; } /* ---- NEW YEAR: midnight navy and champagne ---- */ :root[data-season="newyear"], :root[data-season="newyear"][data-theme="dark"] { color-scheme: dark; --md-primary:#E8CE8B; --md-on-primary:#3D2E00; --md-primary-container:#584300; --md-on-primary-container:#FFE9AE; --md-secondary:#B9C6E4; --md-on-secondary:#233047; --md-secondary-container:#3A475F;--md-on-secondary-container:#D6E3FF; --md-tertiary:#A5D6E8; --md-on-tertiary:#003543; --md-tertiary-container:#1F4D5C; --md-on-tertiary-container:#C2EAFF; --md-surface:#0E1218; --md-on-surface:#E1E2E8; --md-surface-variant:#44464F; --md-on-surface-variant:#C5C6D0; --md-surface-c-lowest:#090C11; --md-surface-c-low:#161A20; --md-surface-c:#1A1E25; --md-surface-c-high:#252930; --md-surface-c-highest:#30343B; --md-outline:#8F909A; --md-outline-variant:#44464F; --md-inverse-surface:#E1E2E8; --md-inverse-on-surface:#2E3036; --md-inverse-primary:#775B13; --md-error:#FFB4AB; --md-on-error:#690005; --md-error-container:#93000A; --md-on-error-container:#FFDAD6; --art-1:#E8CE8B; --art-2:#584300; --art-3:#B9C6E4; --art-4:#A5D6E8; --art-5:#3A475F; --art-6:#3D2E00; --mark:#584300; --mark-ink:#FFE9AE; --frame:#E8CE8B; --motif:#E8CE8B; --motif-2:#A5D6E8; --glow:#E8CE8B; --font-accent:'Ballet', Georgia, serif; /* Ballet is a light formal script: big ascenders and descenders, thin strokes, so it wants more size and far more leading than a sans. */ --accent-weight:400; --accent-track:0; --accent-scale:1.3; --accent-lh:1.3; } /* ---- ALTERNATE THEMES: retain the seasonal hue and decorative face ---- */ :root[data-season="halloween"][data-theme="dark"] { color-scheme:dark; --md-primary:#FFB68A; --md-on-primary:#542100; --md-primary-container:#783607; --md-on-primary-container:#FFDBC5; --md-secondary:#DFB7EC; --md-on-secondary:#42204D; --md-secondary-container:#5A3564;--md-on-secondary-container:#F5D9FF; --md-tertiary:#BAD485; --md-on-tertiary:#293D00; --md-tertiary-container:#3F5513; --md-on-tertiary-container:#D5F1A2; --md-surface:#1D1510; --md-on-surface:#F2DFD1; --md-surface-variant:#554438; --md-on-surface-variant:#DDC1AC; --md-surface-c-lowest:#160E0A; --md-surface-c-low:#271D17; --md-surface-c:#2C221B; --md-surface-c-high:#372B23; --md-surface-c-highest:#43362C; --md-outline:#AA8A75; --md-outline-variant:#554438; --md-inverse-surface:#F2DFD1; --md-inverse-on-surface:#3B2D24; --md-inverse-primary:#9B430D; --md-error:#FFB4AB; --md-on-error:#690005; --md-error-container:#93000A; --md-on-error-container:#FFDAD6; --art-1:#FFB68A; --art-2:#783607; --art-3:#E8873A; --art-4:#DFB7EC; --art-5:#BAD485; --art-6:#542100; --mark:#74470B; --mark-ink:#FFE2AE; --frame:#FFB68A; --motif:#FFB68A; --motif-2:#DFB7EC; --glow:#E8873A; } :root[data-season="bfcm"][data-theme="light"] { color-scheme:light; --md-primary:#506000; --md-on-primary:#FFFFFF; --md-primary-container:#E0FA86; --md-on-primary-container:#172000; --md-secondary:#555D46; --md-on-secondary:#FFFFFF; --md-secondary-container:#DCE5C8;--md-on-secondary-container:#171E0C; --md-tertiary:#B42C36; --md-on-tertiary:#FFFFFF; --md-tertiary-container:#FFDADB; --md-on-tertiary-container:#410007; --md-surface:#F8FAF0; --md-on-surface:#1C2014; --md-surface-variant:#E0E5D0; --md-on-surface-variant:#454B3A; --md-surface-c-lowest:#FFFFFF; --md-surface-c-low:#F0F3E5; --md-surface-c:#EAEFDF; --md-surface-c-high:#E4E9D8; --md-surface-c-highest:#DEE3D2; --md-outline:#747A66; --md-outline-variant:#C5CCB6; --md-inverse-surface:#2E3324; --md-inverse-on-surface:#F0F3E5; --md-inverse-primary:#D8FF4F; --md-error:#BA1A1A; --md-on-error:#FFFFFF; --md-error-container:#FFDAD6; --md-on-error-container:#410002; --art-1:#506000; --art-2:#E0FA86; --art-3:#8FAB19; --art-4:#B42C36; --art-5:#6B7B29; --art-6:#EDF5D3; --mark:#E0FA86; --mark-ink:#243000; --frame:#667800; --motif:#506000; --motif-2:#B42C36; --glow:#B8D83E; } :root[data-season="christmas"][data-theme="dark"] { color-scheme:dark; --md-primary:#99D8B5; --md-on-primary:#003820; --md-primary-container:#195137; --md-on-primary-container:#B4F5D0; --md-secondary:#B3CEBF; --md-on-secondary:#1E3529; --md-secondary-container:#354C3F;--md-on-secondary-container:#CEE9D9; --md-tertiary:#E8C36A; --md-on-tertiary:#412D00; --md-tertiary-container:#5D4400; --md-on-tertiary-container:#FFDF9B; --md-surface:#111A15; --md-on-surface:#DFE5DB; --md-surface-variant:#414B42; --md-on-surface-variant:#BFCCBE; --md-surface-c-lowest:#0B140F; --md-surface-c-low:#19231C; --md-surface-c:#1E281F; --md-surface-c-high:#283329; --md-surface-c-highest:#333F34; --md-outline:#89968A; --md-outline-variant:#414B42; --md-inverse-surface:#DFE5DB; --md-inverse-on-surface:#2B352C; --md-inverse-primary:#276544; --md-error:#FFB4AB; --md-on-error:#690005; --md-error-container:#93000A; --md-on-error-container:#FFDAD6; --art-1:#99D8B5; --art-2:#195137; --art-3:#55A67B; --art-4:#E8C36A; --art-5:#8A6100; --art-6:#354C3F; --mark:#624A12; --mark-ink:#FFE1A0; --frame:#99D8B5; --motif:#99D8B5; --motif-2:#FFB3AE; --glow:#55A67B; } :root[data-season="newyear"][data-theme="light"] { color-scheme:light; --md-primary:#775B13; --md-on-primary:#FFFFFF; --md-primary-container:#F6E3AA; --md-on-primary-container:#261D00; --md-secondary:#465B7A; --md-on-secondary:#FFFFFF; --md-secondary-container:#D9E5FE;--md-on-secondary-container:#10243E; --md-tertiary:#1C667B; --md-on-tertiary:#FFFFFF; --md-tertiary-container:#BDE8F7; --md-on-tertiary-container:#002E3A; --md-surface:#F8F9FE; --md-on-surface:#191E28; --md-surface-variant:#E2E5EE; --md-on-surface-variant:#444B59; --md-surface-c-lowest:#FFFFFF; --md-surface-c-low:#F0F2FA; --md-surface-c:#EAEDF5; --md-surface-c-high:#E4E7F0; --md-surface-c-highest:#DFE2EB; --md-outline:#747B88; --md-outline-variant:#C5CAD5; --md-inverse-surface:#2C3341; --md-inverse-on-surface:#EEF0F7; --md-inverse-primary:#E8CE8B; --md-error:#BA1A1A; --md-on-error:#FFFFFF; --md-error-container:#FFDAD6; --md-on-error-container:#410002; --art-1:#775B13; --art-2:#F6E3AA; --art-3:#8094B5; --art-4:#4D90A5; --art-5:#465B7A; --art-6:#E9D8A8; --mark:#F3DDA0; --mark-ink:#3D2E00; --frame:#9A7A27; --motif:#775B13; --motif-2:#1C667B; --glow:#CFB066; } /* Shadows follow the rendered season/theme, including the unsaved seasonal defaults when the operating system prefers the other mode. */ :root[data-season][data-theme="light"], :root[data-season="halloween"]:not([data-theme="dark"]), :root[data-season="christmas"]:not([data-theme="dark"]) { --shadow-1:0 1px 2px rgba(30,24,12,.2), 0 1px 3px 1px rgba(30,24,12,.07); --shadow-2:0 1px 2px rgba(30,24,12,.2), 0 2px 6px 2px rgba(30,24,12,.07); --shadow-3:0 1px 3px rgba(30,24,12,.2), 0 4px 8px 3px rgba(30,24,12,.07); } :root[data-season][data-theme="dark"], :root[data-season="bfcm"]:not([data-theme="light"]), :root[data-season="newyear"]:not([data-theme="light"]) { --shadow-1:0 1px 2px rgba(0,0,0,.6), 0 1px 3px 1px rgba(0,0,0,.35); --shadow-2:0 1px 2px rgba(0,0,0,.6), 0 2px 6px 2px rgba(0,0,0,.35); --shadow-3:0 1px 3px rgba(0,0,0,.6), 0 4px 8px 3px rgba(0,0,0,.35); } /* ===================================================================== PAGE ===================================================================== */ .campaign { --col:760px; } /* narrower than the guide: this is an article */ .c-head { text-align:center; padding-block:clamp(30px,5vw,56px) 0; } .c-eyebrow { color:var(--md-on-surface-variant); margin-bottom:16px; } .c-title { font-size:clamp(1.85rem,1.05rem + 3.3vw,2.8rem); line-height:1.15; font-weight:800; letter-spacing:-.03em; margin-bottom:18px; } .c-lede { max-width:56ch; margin:0 auto 20px; color:var(--md-on-surface-variant); font-size:1.0625rem; line-height:1.62; } .c-meta { color:var(--md-on-surface-variant); font-size:.9375rem; } .c-rule { width:min(420px,100%); height:1px; background:var(--md-outline-variant); border:0; margin:26px auto 0; } /* the countdown strip */ .c-timer { display:flex; align-items:center; justify-content:center; gap:8px 14px; flex-wrap:wrap; margin-top:24px; padding:12px 18px; border-radius:var(--r-lg); background:var(--md-primary-container); color:var(--md-on-primary-container); } .c-timer b { font-weight:700; } .c-cd { display:inline-flex; gap:5px; } .c-cd i { font-style:normal; min-width:54px; padding:3px 8px; border-radius:var(--r-sm); background:color-mix(in srgb,var(--md-on-primary-container) 14%,transparent); font-family:var(--font-mono); font-weight:600; font-variant-numeric:tabular-nums; } /* --------------------------------------------------------------------- THE ENTRY — dashed frame, as on the reference page --------------------------------------------------------------------- */ .c-entries { display:flex; flex-direction:column; gap:30px; padding-block:34px; } .c-entry { border:2px dashed color-mix(in srgb,var(--frame) 55%,transparent); border-radius:var(--r-lg); padding:clamp(18px,3vw,30px); transition:border-color .25s var(--ease-std), border-radius .4s var(--ease-spring); } .c-entry:hover { border-color:var(--frame); border-radius:var(--r-xl); } .c-entry + .c-entry { position:relative; } .c-entry + .c-entry::before { content:""; position:absolute; left:15%; right:15%; top:-16px; height:1px; background:var(--md-outline-variant); } .c-media { border-radius:var(--r-md); overflow:hidden; background:var(--md-surface-c-high); position:relative; aspect-ratio:16/10; margin-bottom:20px; } .c-media > svg, .c-media > .slot { width:100%; height:100%; object-fit:cover; display:block; border:0; } .c-tag { position:absolute; left:10px; bottom:10px; padding:4px 9px; border-radius:var(--r-xs); background:color-mix(in srgb,var(--md-inverse-surface) 84%,transparent); color:var(--md-inverse-on-surface); backdrop-filter:blur(8px); } .c-flag { position:absolute; right:10px; top:10px; padding:5px 12px; border-radius:var(--r-full); background:var(--badge); color:var(--badge-ink); font-weight:700; } .c-rank { font-family:var(--font-display); font-size:clamp(1.3rem,1.02rem + 1.25vw,1.78rem); line-height:1.24; font-weight:700; letter-spacing:-.022em; margin-bottom:10px; } /* (superseded by the block below — kept for reference) the ONE place a seasonal display face is used. Everything else on the page stays Montserrat + Source Serif 4, so the four campaigns still read as one site. A novelty face set any wider than this costs legibility and costs the shared identity. */ .c-rank .n { color:var(--md-primary); font-family:var(--font-accent); font-weight:700; letter-spacing:.01em; } .c-stars { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:16px; } .c-stars b { font-weight:700; font-variant-numeric:tabular-nums; } .c-body p { margin:0 0 1.1em; } .c-body p:last-child { margin-bottom:0; } /* a customer quote. Only rendered when you supply one — see the note in the page data about why these must be real and attributable. */ .c-quote { margin:1.2em 0; padding:16px 20px; border-left:3px solid var(--md-primary); border-radius:0 var(--r-md) var(--r-md) 0; background:var(--md-surface-c-low); color:var(--md-on-surface-variant); font-style:italic; } .c-quote cite { display:block; margin-top:8px; font-style:normal; font-size:.875rem; opacity:.8; } /* the two-column offer card variant */ .c-offer { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:24px; align-items:center; background:var(--md-surface-c-low); border-radius:var(--r-md); padding:clamp(16px,2.4vw,24px); margin-top:20px; } .c-offer .c-media { margin:0; aspect-ratio:1/1; } .c-checks { list-style:none; margin:0 0 16px; padding:0; display:grid; gap:9px; } .c-checks li { display:flex; gap:10px; align-items:flex-start; font-size:.9375rem; line-height:1.45; } .c-checks svg { flex-shrink:0; margin-top:4px; color:var(--md-tertiary); } .c-price { display:flex; align-items:baseline; gap:9px; flex-wrap:wrap; padding-block:14px; border-block:1px solid var(--md-outline-variant); font-variant-numeric:tabular-nums; } .c-price .was { color:var(--md-on-surface-variant); text-decoration:line-through; } .c-price .now { font-size:1.45rem; font-weight:700; letter-spacing:-.02em; } .c-price .off { font-weight:700; color:var(--md-primary); } /* CTA: a big button in the offer card, a text link under a prose entry */ .c-btn { display:flex; width:100%; align-items:center; justify-content:center; gap:9px; min-height:54px; margin-top:16px; padding:0 20px; border:0; border-radius:var(--r-md); background:var(--md-primary); color:var(--md-on-primary); cursor:pointer; font-family:var(--font-display); font-size:1rem; font-weight:700; letter-spacing:.02em; text-transform:uppercase; text-decoration:none; text-align:center; transition:border-radius .34s var(--ease-spring), box-shadow .22s var(--ease-std); } .c-btn:hover { border-radius:var(--r-xl); box-shadow:var(--shadow-3); } .c-link { display:inline-flex; align-items:center; gap:7px; margin-top:4px; color:var(--md-primary); font-weight:700; font-size:1.0625rem; text-decoration:underline; text-underline-offset:4px; text-decoration-thickness:2px; } .c-link:hover { text-decoration-thickness:3px; } /* closing block */ .c-close { text-align:center; padding-block:10px 40px; } .c-close h2 { font-size:clamp(1.4rem,1.1rem + 1.2vw,1.8rem); font-weight:700; margin-bottom:12px; } .c-close p { max-width:54ch; margin:0 auto 20px; color:var(--md-on-surface-variant); } @media (max-width:640px) { .c-offer { grid-template-columns:1fr; } .c-offer .c-media { aspect-ratio:16/10; } .c-entry + .c-entry::before { left:25%; right:25%; } } /* ===================================================================== SEASONAL ORNAMENTS --------------------------------------------------------------------- Shapes are injected as inline SVG by campaign.js so they can be filled with the season's --motif tokens. Everything here is decoration, marked aria-hidden, and sized to sit behind the content rather than compete with it. ===================================================================== */ /* a soft wash of the season's colour behind the header only */ .campaign::before { content:""; position:fixed; inset:0 0 auto 0; height:520px; z-index:-1; pointer-events:none; background:radial-gradient(120% 100% at 50% -20%, color-mix(in srgb, var(--glow) 22%, transparent) 0%, transparent 62%); } /* the row of small marks under the eyebrow */ .c-orn { display:flex; align-items:center; justify-content:center; gap:14px; margin-bottom:18px; } .c-orn::before, .c-orn::after { content:""; flex:0 1 74px; height:1px; background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--motif) 55%, transparent)); } .c-orn::after { background:linear-gradient(270deg, transparent, color-mix(in srgb, var(--motif) 55%, transparent)); } .c-orn svg { width:22px; height:22px; flex:0 0 auto; } .c-orn svg:nth-child(2) { width:30px; height:30px; } /* the divider that replaced the plain rule under the header */ .c-div { display:flex; align-items:center; justify-content:center; gap:16px; width:min(440px,100%); margin:28px auto 0; } .c-div::before, .c-div::after { content:""; flex:1; height:1px; background:var(--md-outline-variant); } .c-div svg { width:20px; height:20px; flex:0 0 auto; opacity:.85; } /* a small mark pinned to the corner of each dashed frame, like a sticker */ .c-entry { position:relative; } .c-corner { position:absolute; top:-13px; left:22px; width:28px; height:28px; padding:3px; border-radius:50%; background:var(--md-surface); transition:transform .35s var(--ease-spring); } .c-entry:hover .c-corner { transform:rotate(-12deg) scale(1.12); } .c-corner svg { width:100%; height:100%; } /* the winner gets a second mark on the other corner */ .c-entry--top .c-corner--r { left:auto; right:22px; } .c-entry--top { border-color:var(--frame); } /* marks drifting behind the header — Halloween bats, Christmas snow, and so on */ .c-float { position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:-1; } .c-float svg { position:absolute; opacity:.2; animation:cfloat 9s var(--ease-emph) infinite alternate; } /* kept in the margins, clear of the 760px reading column */ .c-float svg:nth-child(1) { top:10%; left:1%; width:40px; animation-delay:-1s; } .c-float svg:nth-child(2) { top:30%; right:1%; width:54px; animation-delay:-4s; } .c-float svg:nth-child(3) { top:64%; left:4.5%; width:30px; animation-delay:-6s; } .c-float svg:nth-child(4) { top:55%; right:5%; width:36px; animation-delay:-2.5s; } @keyframes cfloat { from { transform:translateY(-8px) rotate(-6deg); } to { transform:translateY(10px) rotate(6deg); } } .c-head { position:relative; } @media (max-width:640px) { .c-orn::before, .c-orn::after { flex-basis:34px; } .c-float svg:nth-child(n+3) { display:none; } .c-float svg { opacity:.11; } } @media (prefers-reduced-motion:reduce) { .c-float svg { animation:none; } } /* prose stays serif; the rest of the entry is UI and takes the sans back */ .c-link, .c-price, .c-stars, .c-timer, .c-meta, .c-checks li { font-family:var(--font-display); } .c-checks li { font-size:.9375rem; } .c-stars b { font-weight:700; } /* ===================================================================== HOW FAR THE SEASONAL FACE GOES --------------------------------------------------------------------- The main gift guide and every sub-page stay on the normal site stack — nothing here touches them. On a campaign page the decorative face takes the three big one-off pieces of type and nothing else: the page headline · the #N rank numbers · the closing title What it deliberately does NOT take, and why: product headings 13 repeats that have to be scannable at a glance body copy these are single-weight novelty faces; a paragraph of one is unreadable buttons, labels, prices, UI controls must look like controls on every page TO TURN IT DOWN: set --font-accent to var(--font-display) for that season and the page falls back to pure Montserrat. TO TURN IT UP: add .c-timer b to the selector list below. ===================================================================== */ .c-title { font-family:var(--font-accent); font-weight:var(--accent-weight, 700); letter-spacing:var(--accent-track, -.03em); line-height:var(--accent-lh, 1.15); font-size:calc(clamp(1.85rem, 1.05rem + 3.3vw, 2.8rem) * var(--accent-scale, 1)); } .c-close h2 { font-family:var(--font-accent); font-weight:var(--accent-weight, 700); letter-spacing:var(--accent-track, -.02em); line-height:var(--accent-lh, 1.2); } .c-rank .n { font-family:var(--font-accent); font-weight:var(--accent-weight, 700); letter-spacing:var(--accent-track, 0); } /* the product name itself stays on the site face — 13 of these have to stay scannable, and that is worth more than one more seasonal touch */ .c-rank { font-family:var(--font-display); } /* Source photography keeps its original framing, including on phones. */ .c-media.c-media--natural { aspect-ratio:auto; } .c-media.c-media--natural > .slot { height:auto; } .c-offer .c-media--natural { align-self:start; } .c-review-mark { color:var(--star-color, #FFD600); font-size:1.35rem; line-height:1; } .c-prose-checks { margin-top:20px; } .c-source { max-width:58ch; margin:12px auto 0; font-size:.8rem; color:var(--md-on-surface-variant); line-height:1.5; } .c-source a { color:inherit; text-underline-offset:3px; }