/* guides-r3.css - round 3 look for the guide articles and the guide hub. Loaded after core.css + guides.css (articles) or guides-hub.css (hub). Changes only presentation: the ring photo is gone (calm haze type hero, visible crumbs = the BreadcrumbList), the buy box becomes the glass bar (price · city links · one red button), related guides become plain rows. Article, FAQ, TOC and hero markup are untouched. Type: Oswald for titles and prices, Outfit for the rest; no serif, no italic. No animation of its own. */ /* core.css scopes the system tokens to the chrome; the guide pages read the same values (copied from glass/core/system.css :root) */ .g-guide,.g-guidehub{ --ink:#18272d;--ink-2:#33434b;--red:#bc1c2b;--red-h:#d02333;--red-p:#9e1724;--paper:#f6f3ee;--sky:#e9e4da;--line:#18272d24;--line-2:#18272d40; --glass-strong:#ffffffe0;--glass-edge:#ffffffd0;--blur:blur(18px) saturate(120%);--r:20px;--r-ctl:12px;--pill:999px; --sh-1:0 1px 2px #1721260d,0 6px 18px -6px #1721261f;--sh-2:0 2px 4px #1721260f,0 24px 48px -18px #17212638;--sh-red:0 1px 2px #9e172433,0 10px 22px -8px #bc1c2b66; --head:104px;--f-ui:Outfit,system-ui,Arial,sans-serif;--f-dis:Oswald,'Arial Narrow',Arial,sans-serif; --gd-wash:#f6f3ee;background:#f6f3ee} @media(max-width:700px){.g-guide,.g-guidehub{--head:84px}} /* ---------- hero: haze, crumbs, title ---------- */ .gh3{background:linear-gradient(180deg,var(--sky) 0,#e6e4dd 72%,var(--paper) 100%)} .gh3 .crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:0 8px;margin:0 0 18px;font-size:13px;font-weight:500;line-height:20px;color:var(--ink-2)} .gh3 .crumbs a{position:relative;color:var(--ink);font-weight:600;text-decoration:none} .gh3 .crumbs a::after{content:'';position:absolute;inset:-12px -6px} .gh3 .crumbs__sep{opacity:.5} @media(hover:hover) and (pointer:fine){.gh3 .crumbs a:hover{text-decoration:underline;text-underline-offset:3px}} .gd .gh3>.crumbs{margin:0;padding:calc(var(--head) + 10px) var(--g-gutter) 0} .gd .gh3 .guide-hero{padding-top:18px} .gd .guide-hero h1{font:500 clamp(40px,11vw,84px)/1 var(--f-dis);letter-spacing:-.006em} .gd .guide-hero h1 em{margin-top:.3em;font:500 .42em/1.05 var(--f-dis);text-transform:uppercase;letter-spacing:.01em;color:var(--red)} .gd .hero-eyebrow{color:var(--ink-2)} .gd .hero-lede{color:var(--ink);max-width:52ch} .gd .guide-meta span{background:#ffffffb8;border-color:var(--line);-webkit-backdrop-filter:none;backdrop-filter:none} @media(min-width:701px){.gd .gh3>.crumbs{padding-top:calc(var(--head) + 28px)}.gd .gh3 .guide-hero{padding-top:22px}} @media(min-width:1051px){.gd .gh3>.crumbs{padding-inline:max(var(--g-gutter),calc((100% - var(--gd-wrap)) / 2))}} /* ---------- short answer: a quiet card, the red rule stays as the only accent ---------- */ .gd .kortsvar .wrap{background:#fff;border:0;box-shadow:var(--sh-1);-webkit-backdrop-filter:none;backdrop-filter:none} /* ---------- related guides: rows, not cards ---------- */ .gd .related-guides h2{font:500 clamp(28px,6vw,40px)/1 var(--f-dis);text-transform:uppercase} .gd .related-grid{gap:0 32px;border-top:1px solid var(--line)} .gd .related-card{position:relative;min-height:76px;padding:14px 36px 14px 0;border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent;box-shadow:none} .gd .related-card::after{content:'→';position:absolute;right:4px;top:50%;transform:translateY(-50%);font-size:20px;color:var(--ink-2)} .gd .related-eyebrow{color:var(--ink-2)} .gd .related-title{font-size:18px} @media(min-width:1051px){.gd .related-grid{grid-template-columns:1fr 1fr}} @media(hover:hover) and (pointer:fine){.gd .related-card:hover{transform:none;box-shadow:none}.gd .related-card:hover .related-title{text-decoration:underline;text-underline-offset:4px}} /* ---------- buy box: the glass bar on the haze (price · city links · one red button) ---------- */ .gd .guide-cta{position:relative;color:var(--ink);background:linear-gradient(180deg,var(--paper) 0,var(--sky) 100%);border-radius:0;margin:48px 0 0;padding:44px var(--g-gutter) 40px} .gd .guide-cta .gd-cta-in{padding:20px;border-radius:var(--r);background:var(--glass-strong);border:1px solid var(--glass-edge);box-shadow:var(--sh-2); -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur)} .gd .guide-cta .eyebrow{color:var(--ink-2)} .gd .guide-cta h2{font:500 clamp(32px,8vw,56px)/.96 var(--f-dis);color:var(--ink)} .gd .guide-cta p{color:var(--ink)} .gd .guide-cta a{color:var(--ink)} .gd .gd-cta-price{padding-top:12px;border-top:1px solid var(--line)} .gd .gd-cta-price b{font:500 44px/1 var(--f-dis);color:var(--ink)} .gd .gd-cta-price span{color:var(--ink-2)} .gd .gd-cta-label{color:var(--ink-2)!important;letter-spacing:.02em;text-transform:none;font-size:15px!important} .gd .gd-chip{color:var(--ink);background:#fff;border:0;box-shadow:inset 0 0 0 1.5px var(--line-2)} .gd .gd-chip:active{background:#18272d0f} .gd .guide-cta a.btn{color:#fff;background:var(--red);border-radius:var(--r-ctl);box-shadow:var(--sh-red);justify-content:space-between} .gd .guide-cta-fine{color:var(--ink-2);border-top-color:var(--line);max-width:72ch} .gd .guide-cta-fine a{color:var(--ink)} .gd .guide-cta :is(a,summary):focus-visible{outline:3px solid var(--ink);outline-offset:3px} @media(min-width:701px){.gd .guide-cta .gd-cta-in{padding:28px 32px}} @media(min-width:1051px){ .gd .guide-cta{max-width:none;width:auto;margin:64px 0 0;padding:72px max(var(--g-gutter),calc((100% - 1180px) / 2)) 64px} .gd .guide-cta .gd-cta-in{max-width:1180px;padding:36px 40px} .gd .guide-cta-fine{margin-left:0} } @media(hover:hover) and (pointer:fine){.gd .gd-chip:hover{background:#18272d0a}.gd .guide-cta a.btn:hover{background:var(--red-h)}} /* inline course box inside the article: a quiet card with the red button */ .gd .guide-cta-inline{background:#fff;border-color:var(--line);box-shadow:var(--sh-1);-webkit-backdrop-filter:none;backdrop-filter:none} /* ---------- hub ---------- */ .g-guidehub .gh3 .gd-hero{padding-top:calc(var(--head) + 10px)} .g-guidehub .gd-hero h1{font:500 clamp(44px,12vw,104px)/1 var(--f-dis);letter-spacing:-.006em} .g-guidehub .gd-hero h1 em{display:block;margin-top:.04em;font-style:normal;color:var(--red)} .g-guidehub .gd-hero .lede{color:var(--ink);max-width:48ch} .g-guidehub .gd-band-head h2{font:500 clamp(30px,6.4vw,48px)/1 var(--f-dis);text-transform:uppercase} .g-guidehub .gd-band{padding:44px 0 8px} .g-guidehub .gd-card{border:0;border-radius:var(--r);background:#fff;box-shadow:var(--sh-1)} .g-guidehub .gd-card h3{font:500 24px/1.08 var(--f-dis);text-transform:uppercase} .g-guidehub .gd-card .tag{color:var(--ink-2)} .g-guidehub .gd-cta{margin:56px 0 0;border-radius:0;padding:56px var(--g-gutter);color:var(--ink);background:linear-gradient(180deg,var(--paper) 0,var(--sky) 100%)} .g-guidehub .gd-cta-inner{max-width:760px;padding:24px;border-radius:var(--r);background:var(--glass-strong);border:1px solid var(--glass-edge);box-shadow:var(--sh-2); -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur)} .g-guidehub .gd-cta h2{color:var(--ink)} .g-guidehub .gd-cta h2 em{font-style:normal;color:var(--red)} .g-guidehub .gd-cta p{color:var(--ink)} .g-guidehub .gd-cta-btn{background:var(--red);box-shadow:var(--sh-red);justify-content:space-between} .g-guidehub .gd-cta-btn:focus-visible{outline-color:var(--ink)} @media(min-width:701px){.g-guidehub .gh3 .gd-hero{padding-top:calc(var(--head) + 28px)}.g-guidehub .gd-cta-inner{padding:36px 40px}} @media(min-width:1051px){.g-guidehub .gd-cta{max-width:none;width:auto;margin:72px 0 0;padding:80px var(--g-gutter)}} @media(hover:hover) and (pointer:fine){.g-guidehub .gd-cta-btn:hover{background:var(--red-h)}} /* ---------- desktop: the table of contents sits in the right column, so the article keeps the hero's left edge ---------- */ @media(min-width:1051px){ .gd-layout{grid-template-columns:minmax(0,var(--gd-col)) 280px} .gd-main{grid-column:1;grid-row:1} .gd-toc{grid-column:2;grid-row:1} } /* F23: course entry inside two guides. WebKit test build 2370: with a