/* ============================================================ GLASS CASTLE BRAND COLOUR CORRECTIONS Load this AFTER styles.css. It overrides every off-brand value with the correct Brand Guide token. Applied 30 July 2026. Every replacement justified by CIE Delta E 2000 measurement or WCAG contrast verification. TO USE: add this line to every Glass Castle page , AFTER the styles.css link: When the full estate token system is deployed, this file is retired and its corrections move into the shared layer. ============================================================ */ /* ── Core tokens: override Airbnb Rausch and off-brand teal ── */ :root { --magenta: #D81B60; /* was #FF385C (Airbnb Rausch), dE 11.94 from brand */ --magenta-deep: #D81B60; /* was #E31C5F (derived dark), dE 2.78, collapsed */ --teal: #009688; /* was #01696F, dE 18.02 from brand */ /* Shared estate CTA component tokens (/ah-shared/estate-cta.css). Pantone 214C magenta, shared with The Think Tank SA. */ --ah-cta-accent: #D81B60; --ah-cta-border: #B01450; } /* ── Buttons: corrected shadows and focus rings ── */ .btn:focus-visible { outline: 3px solid rgba(216, 27, 96, 0.4); /* was Rausch rgba */ } .btn--gold:hover { background: #F5A623; /* was #e0940f, nearest match was the Website Development accent, refused */ } /* ── Form status: Option A (surface rule applied) ── */ .form-status[data-state="ok"] { color: #0A1F44; background: rgba(0, 150, 136, 0.10); border: 0; border-left: 3px solid #009688; } .form-status[data-state="err"] { color: #0A1F44; background: rgba(216, 27, 96, 0.10); border: 0; border-left: 3px solid #D81B60; } /* ── Form field focus ring ── */ .field input:focus, .field select:focus, .field textarea:focus { border-color: var(--magenta); box-shadow: 0 0 0 3px rgba(216, 27, 96, 0.14); } /* ── About page: section eyebrows, intro border, links, insets ── */ .about-story__intro { border-left-color: #D81B60; } .about-section__eyebrow { color: #D81B60; } .about-section a { border-bottom-color: rgba(216, 27, 96, 0.35); } .about-section a:hover, .about-section a:focus-visible { border-bottom-color: #D81B60; } .about-inset__eyebrow { color: #D81B60; } .about-inset__eyebrow::before { background: #D81B60; } .about-inset__link { color: #D81B60; border-bottom-color: rgba(216, 27, 96, 0.35); } .about-inset__link:hover { border-bottom-color: #D81B60; } .about-inset a { color: #D81B60; } .about-close__signoff, .about-section .about-close__signoff { color: #D81B60; } /* ── About future block ── */ .about-future { background: linear-gradient(180deg, #0A1F44 0%, rgba(0, 150, 136, 0.12) 100%), #0A1F44; } .about-future::before { background: linear-gradient(180deg, #D81B60 0%, #F5A623 100%); } .about-future__eyebrow { color: #D81B60; } .about-future__milestone-when { color: #D81B60; } .about-section .about-future__cta-btn { background: #D81B60; box-shadow: 0 10px 30px -10px rgba(216, 27, 96, 0.55); } .about-future__cta-btn:hover, .about-future__cta-btn:focus-visible { background: #D81B60; } /* ── Vimeo play button ── */ .vimeo-lite__play { background: rgba(216, 27, 96, 0.95); box-shadow: 0 12px 30px -8px rgba(216, 27, 96, 0.5); } .vimeo-lite:hover .vimeo-lite__play, .vimeo-lite__play:hover, .vimeo-lite__play:focus-visible { background: #D81B60; } /* ── Lightbox hover accents ── */ .ttcar__lb-close:hover, .ttcar__lb-arrow:hover, .ttcar__lb-close:focus-visible, .ttcar__lb-arrow:focus-visible { background: var(--magenta); border-color: var(--magenta); } .ttcar__lb-close:focus-visible, .ttcar__lb-arrow:focus-visible { box-shadow: 0 0 0 3px rgba(216, 27, 96, 0.4); } /* ── Utility strip dropdown background ── */ .utility-strip__drop { background: #0A1F44; } /* ── Services mega-menu trigger and panel ── */ .gc-services__trigger:hover, .gc-services__trigger:focus-visible { color: #D81B60; } .gc-services__panel { border-top-color: #D81B60; } /* ── Footer group label ── */ .ah-group__label { color: #D81B60; } /* ── Experiences page: jump nav, venue links, FAQ, openings ── */ .cat-jump a:hover, .cat-jump a:focus-visible { background: #D81B60; border-color: #D81B60; } .cat-jump a:focus-visible { box-shadow: 0 0 0 3px rgba(216, 27, 96, 0.28); } .venue__link a { color: #D81B60; } .venue__link a:hover, .venue__link a:focus-visible { border-bottom-color: #D81B60; } .venue__link a:focus-visible { box-shadow: 0 0 0 3px rgba(216, 27, 96, 0.24); } .faq summary::after { color: #D81B60; } .faq summary:focus-visible { outline-color: #D81B60; } .opening--summer { border-color: #D81B60; } .opening--summer::before { background: #D81B60; } .opening-note a { color: #D81B60; } .delivery-card__link a { color: #D81B60; } .delivery-card__link a:hover, .delivery-card__link a:focus-visible { border-bottom-color: #D81B60; } /* ── Book CTA ── */ .book-cta__meta .text-link, .book-cta__meta a { border-bottom-color: rgba(255, 255, 255, 0.4); } /* ── Estate motifs: circuit line and hive, in Glass Castle magenta ── */ :root { --ah-motif-line: url('/ah-shared/brand/circuit-line-01.svg'); --ah-motif-accent: #D81B60; --ah-motif-opacity: .13; } /* ── Estate card rule: every card carries a rounded accent top ── Matches the AutoHive Box Rule used across the estate. On Glass Castle the accent is the brand magenta, not gold: gold reads as the Web Development division. The radius is carried on the top corners so the accent reads as a rounded cap, not a hard rule. */ .venue, .delivery-card, .quote, .opening { border-top: 4px solid var(--magenta); border-top-left-radius: 16px; border-top-right-radius: 16px; overflow: hidden; } .venue { border-radius: 16px; } .delivery-card { border-radius: 16px; } /* The quote card shipped with a gold cap: bring it onto brand. */ .quote { border-top-color: var(--magenta); } /* Openings already carried a magenta rule; keep its left marker but let the cap lead. */ .opening--summer { border-top-color: var(--magenta); }