/* ===================================================================== RoamRecs — shared theme --------------------------------------------------------------------- The design system behind the 2026 home page, extracted so every page can share it instead of copying it. Tokens, type scale, buttons and the tonal card family live here; page-specific components do not. USAGE 1. BEFORE the page's own stylesheet, and site-chrome.css last. Order matters: .btn, .container and .center are defined both here and in creator-program.css / tuscany-wedding-venues.css / terms.css, and their .container pads 40px against this file's 24px. Loading the theme first lets each page keep its own layout primitives; a page opts into the new look explicitly, via its own adaptation block. 2. For the full marketing look, add class="rr-wash" to . Without it you still get the tokens, type, buttons and cards, but the page keeps its own background — which is what app pages want. 3. The type scale needs the webfonts. site-chrome.css imports them, so any page loading that already has them; pages that want the fastest path can also preload them directly (see home.html). TOKENS ARE NAMESPACED --rr-*. This is deliberate: creator-program.css, tuscany-wedding-venues.css, terms.css and site-chrome.css all define or consume a bare --ink (and --card, --max, --text, --ease, --grad), so an un-prefixed :root block here would silently repaint pages that never opted in. Do not drop the prefix. To re-skin everything, change --rr-wash-top / --rr-wash-bot. ===================================================================== */ :root{ --rr-wash-top:#eef1fe; --rr-wash-bot:#cdd6f8; --rr-ink:#111a4d; /* deep indigo — display type */ --rr-ink-2:#14161d; /* near-black — card headlines */ /* The page sits on a mid-tone wash, so body text has to run darker than it would on white to clear WCAG AA. Measured against --rr-wash-bot (#cdd6f8), the worst background on the page: .78 = 7.3:1, .64 = 4.7:1. Lightening either of these below those alphas fails contrast on the wash. */ --rr-body-c:rgba(20,22,29,.78); --rr-body-c2:rgba(20,22,29,.64); --rr-brand:#5b4ff0; --rr-brand-2:#3d31d6; --rr-brand-soft:rgba(91,79,240,.10); --rr-grad:linear-gradient(103deg,#0066ff 0%,#6a5bff 48%,#c27aff 100%); /* The same ramp, darkened so it can BE the text rather than sit behind it. --rr-grad is a fill with white on top, so its light end never has to carry anything; clipped to a headline on the wash (#d1d9f9 measured) that end is 1.99:1, under the 3:1 large text needs. Every stop here clears 3.4:1. */ --rr-grad-ink:linear-gradient(103deg,#0066ff 0%,#5a45e8 48%,#7c3aed 100%); --rr-grad-soft:linear-gradient(103deg,rgba(0,102,255,.14),rgba(194,122,255,.14)); --rr-card:rgba(255,255,255,.50); --rr-card-hi:rgba(255,255,255,.72); --rr-card-line:rgba(255,255,255,.70); --rr-card-shadow:0 24px 54px -26px rgba(17,26,77,.38); --rr-lift:0 34px 70px -30px rgba(17,26,77,.46); --rr-r-xl:38px; --rr-r-lg:28px; --rr-r-md:20px; --rr-r-sm:14px; --rr-max:1180px; --rr-ease:cubic-bezier(.22,1,.36,1); --rr-display:"Outfit","Helvetica Neue",Arial,sans-serif; --rr-text:"Plus Jakarta Sans","Helvetica Neue",Arial,sans-serif; } *{ box-sizing:border-box; } html{ scroll-behavior:smooth; } body{ margin:0; font-family:var(--rr-text); color:var(--rr-body-c); -webkit-font-smoothing:antialiased; } /* The wash is OPT-IN. Pages add class="rr-wash" to to take the full marketing treatment; app pages link this file for the tokens, type and components without having their working surface repainted. */ body.rr-wash{ background:var(--rr-wash-bot); overflow-x:hidden; } /* The wash itself: a fixed gradient plus three soft blooms standing in for the "sky" feeling, so it never scrolls out from under the content. */ body.rr-wash::before{ content:""; position:fixed; inset:0; z-index:-2; background:linear-gradient(180deg,var(--rr-wash-top) 0%,var(--rr-wash-bot) 46%); } body.rr-wash::after{ content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; background: radial-gradient(40% 26% at 4% 14%, rgba(255,255,255,.70), transparent 72%), radial-gradient(34% 22% at 98% 26%, rgba(255,255,255,.58), transparent 72%), radial-gradient(48% 30% at 52% 98%, rgba(255,255,255,.42), transparent 72%); } .rr-wash main{ background:transparent; } /* height:auto is load-bearing, not tidiness: these tags carry width/height attributes, and without it the attribute height is used literally, so an image sized by CSS width alone renders at its full intrinsic height. */ img{ max-width:100%; height:auto; } .container{ width:100%; max-width:var(--rr-max); margin:0 auto; padding:0 24px; } .center{ text-align:center; } /* ── Type scale ──────────────────────────────────────────────────────────── */ /* No colour here on purpose. An element-level rule beats an INHERITED value, so setting it would override the white that dark sections pass down to their headings (a hero over a photo, an overlay band) on every page that links this file. Components below set their own colour; anything else inherits. */ h1,h2,h3,h4{ font-family:var(--rr-display); margin:0; } .display{ font-family:var(--rr-display); font-weight:700; font-size:clamp(2.55rem,6.6vw,5.1rem); line-height:1.02; letter-spacing:-.035em; color:var(--rr-ink); margin:0; text-wrap:balance; } .section-title{ font-family:var(--rr-display); font-weight:700; font-size:clamp(1.95rem,4.2vw,3.15rem); line-height:1.06; letter-spacing:-.03em; color:var(--rr-ink); margin:0 0 18px; text-wrap:balance; } .section-sub{ font-size:clamp(1rem,1.25vw,1.15rem); line-height:1.6; color:var(--rr-body-c); max-width:60ch; margin:0 auto; font-weight:500; } .section-sub.left{ margin:0; } /* Brand gradient on a single phrase. Deliberately rationed — the old page ran this on all seven headings, which is what made them read as one formula. */ .grad-text{ background:var(--rr-grad); -webkit-background-clip:text; background-clip:text; color:transparent; } /* Top and bottom stack between neighbours, so this value lands twice: at 132px it put 264px of empty page between every pair of sections. */ .section-pad{ padding:clamp(52px,5.5vw,84px) 0; } .section-pad-sm{ padding:clamp(48px,6vw,80px) 0; } /* ── Buttons ─────────────────────────────────────────────────────────────── */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; font-family:var(--rr-text); font-weight:600; font-size:1.02rem; padding:17px 34px; border-radius:999px; border:1px solid transparent; text-decoration:none; cursor:pointer; transition:transform .25s var(--rr-ease), box-shadow .25s var(--rr-ease), background .25s var(--rr-ease); } .btn-primary{ background:var(--rr-grad); color:#fff; box-shadow:0 16px 34px -12px rgba(0,80,220,.6); } .btn-primary:hover{ transform:translateY(-2px); box-shadow:0 24px 46px -14px rgba(0,80,220,.66); } .btn-quiet{ background:#fff; color:var(--rr-brand-2); border-color:rgba(255,255,255,.9); box-shadow:0 12px 26px -14px rgba(17,26,77,.4); } .btn-quiet:hover{ transform:translateY(-2px); } .btn-lg{ padding:19px 40px; font-size:1.06rem; } .textlink{ display:inline-flex; align-items:center; gap:8px; font-weight:600; color:var(--rr-ink); text-decoration:none; border-bottom:1.5px solid rgba(17,26,77,.28); padding-bottom:2px; transition:border-color .2s var(--rr-ease), gap .2s var(--rr-ease); } .textlink:hover{ border-color:var(--rr-ink); gap:12px; } /* ══════════════════════════════════════════════════════════════════════════ FEATURE CARDS — tonal cards, image on top, headline centered beneath ══════════════════════════════════════════════════════════════════════════ */ .cards{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(20px,2.4vw,32px); margin-top:clamp(44px,5vw,68px); } /* The card height is fixed and the art frame is the only flexible row, so when the hover copy opens the art gives up exactly the space the text takes and the card itself never changes size. */ .card{ background:var(--rr-card); border:1px solid var(--rr-card-line); border-radius:var(--rr-r-xl); padding:clamp(24px,2.6vw,38px); text-align:center; box-shadow:var(--rr-card-shadow); transition:transform .35s var(--rr-ease), box-shadow .35s var(--rr-ease), background .35s var(--rr-ease); height:clamp(500px,44vw,620px); display:flex; flex-direction:column; } .card:hover{ transform:translateY(-6px); background:var(--rr-card-hi); box-shadow:var(--rr-lift); } /* Pastel frame the screenshot sits inside — the one place colour gets loud. */ .card-frame{ --frame-pad:clamp(18px,2.4vw,30px); border-radius:var(--rr-r-lg); padding:var(--frame-pad); display:flex; align-items:flex-end; justify-content:center; min-height:clamp(190px,22vw,290px); overflow:hidden; } /* Sized by HEIGHT, not width, so it scales with the frame as the frame flexes. */ .card .card-frame{ flex:1 1 auto; min-height:0; } .card .card-frame img{ width:auto; max-width:100%; height:calc(100% + var(--frame-pad)); transition:height .45s var(--rr-ease); } .card-frame img{ display:block; width:min(62%,230px); border-radius:18px 18px 0 0; box-shadow:0 22px 44px -18px rgba(17,26,77,.5); margin-bottom:calc(clamp(18px,2.4vw,30px) * -1); } .frame-a{ background:linear-gradient(150deg,#ffe1ec,#e5dcff 52%,#d6ecff); } .frame-b{ background:linear-gradient(150deg,#ffeccc,#ffdfe4 54%,#e6ddff); } .frame-c{ background:linear-gradient(150deg,#d9f2e6,#dbe9ff 52%,#eadcff); } .frame-d{ background:linear-gradient(150deg,#e2e0ff,#ffe0f0 54%,#fff0d6); } .card h3{ flex:none; font-size:clamp(1.3rem,1.9vw,1.72rem); font-weight:700; letter-spacing:-.02em; line-height:1.18; color:var(--rr-ink-2); margin:clamp(26px,2.6vw,38px) 0 12px; text-wrap:balance; } /* The supporting line stays out of the way until you show interest in the card. grid-template-rows 0fr→1fr animates cleanly where max-height would jump, and the text stays in the DOM (clipped, not display:none) so screen readers keep it. Cards carry tabindex so keyboard users can reveal it too. */ .card-reveal{ flex:none; display:grid; grid-template-rows:0fr; opacity:0; transition:grid-template-rows .45s var(--rr-ease), opacity .3s var(--rr-ease); } .card:hover .card-reveal, .card:focus-visible .card-reveal, .card:focus-within .card-reveal{ grid-template-rows:1fr; opacity:1; } .card-reveal > p{ overflow:hidden; margin:0; font-size:1rem; line-height:1.6; color:var(--rr-body-c); max-width:42ch; margin-inline:auto; } .card:focus-visible{ outline:3px solid var(--rr-brand); outline-offset:4px; } .card h3{ cursor:default; } /* No hover to give, so never hide the copy. */ @media (hover:none){ .card-reveal{ grid-template-rows:1fr; opacity:1; } } /* ── Reveal on scroll ────────────────────────────────────────────────────── */ .reveal{ opacity:0; transform:translateY(24px); transition:opacity .75s var(--rr-ease), transform .75s var(--rr-ease); } .reveal.in{ opacity:1; transform:none; } @media (prefers-reduced-motion:reduce){ .reveal{ opacity:1; transform:none; transition:none; } .stage-chip{ animation:none; } .marquee-track{ animation:none; } .tp-dots i{ animation:none; } .marquee{ overflow-x:auto; } .card-reveal{ grid-template-rows:1fr; opacity:1; transition:none; } .skel-fill{ animation:none; } html{ scroll-behavior:auto; } *{ transition-duration:.01ms !important; } }