/* ========================================================================== AW Custom v2 — section + row system Loaded ONLY on page-aw-custom-v2.php (see inc/aw-v2-loader.php), so nothing here can affect any other template. Tokens come from :root in aw-styles.css. The v2 aliases below let a value be retargeted in one line without touching the site-wide palette. ========================================================================== */ .aw-v2 { --v2-green: var(--green, #abad1f); --v2-brown: var(--brown, #402e00); --v2-yellow: var(--yellow, #fdb714); --v2-blue: var(--blue, #70AADA); --v2-dark: var(--dark-gray, #333); --v2-white: #fff; /* The container's side gutter, mirrored as a token so anything needing to know how far the content sits from the viewport edge can compute it instead of guessing. Kept in step with the .container padding below. */ --v2-page-gutter: 25px; /* Not in the site palette; needed for the "What the Visit Looks Like" band. */ --v2-cream: #fdf0d0; /* The Figma frame samples blue at #79a1d5. The site's own blue is #70AADA and the export carries a 1-2 point colour shift, so we follow the site. Change this one line if exact Figma fidelity is wanted instead. */ --v2-blue-surface: var(--v2-blue); /* Do NOT use var(--font-display) here. That token names "thirsty-rough-lt-two", which the theme's Typekit kit (uli7tgn) does not load — the kit only provides "thirsty-rough-two", so anything consuming the token silently falls back to Oswald. The theme's own 14 cursive rules hardcode the real family for the same reason. Fixing the token itself would be a site-wide change. */ /* Alkaline is NOT loaded on this site yet — the Typekit kit (uli7tgn) provides only thirsty-rough-two, and there is no local @font-face for it. It is listed first so the page switches over automatically the moment Alkaline is added to the kit; until then it falls back to thirsty-rough-two. */ --v2-font-display: "alkaline", "Alkaline", "thirsty-rough-two", cursive; --v2-font-heading: "Oswald", "Helvetica Neue", Arial, sans-serif; --v2-font-body: var(--font-body, "Montserrat", Arial, sans-serif); --v2-space-sm: 32px; --v2-space-md: 56px; --v2-space-lg: 88px; --v2-space-xl: 120px; --v2-space-xxl: 168px; --v2-maxw-narrow: 720px; --v2-maxw-normal: 900px; --v2-maxw-wide: 1140px; } /* Decor breaks out of its section horizontally, which would otherwise create a horizontal scrollbar. Guard on BODY, never on html: on html it collapses Bootstrap's scroll-lock and this site runs WP Popups + Booking Calendar modals. Scoped to the v2 body class so no other page is touched. */ body.aw-v2-page { overflow-x: clip; } /* The theme's yellow page-title strip sits above the hero. Its heading should be Oswald on these pages. Scoped to the v2 body class so no other template is affected. */ body.aw-v2-page .strip-yellow--top { padding-top: 24px; padding-bottom: 24px; } body.aw-v2-page .strip-yellow--top h1, body.aw-v2-page .strip-yellow--top .h1 { font-family: "Oswald", "Helvetica Neue", Arial, sans-serif; font-weight: 600; } /* --------------------------------------------------------------- section */ .aw-v2-section { position: relative; font-family: var(--v2-font-body); } /* A section carrying decor must not clip it. `visible` is required here — `clip` or `hidden` would crop exactly the overflow the decor exists to create. The horizontal scrollbar this could cause is contained by overflow-x on body above. */ .aw-v2-section.aw-v2-has-decor { overflow: visible; } .aw-v2-section__inner { position: relative; z-index: 2; } /* Content width. Design width is 1350px; the container caps at 1250 and always keeps a gutter so content never runs to the viewport edge. Below 1250 the container is fluid and the gutter is what stops it touching the sides, which is what makes the tablet and mobile steps behave without extra breakpoints. Bootstrap 4 would otherwise cap this at 1140. Scoped to v2 only. */ .aw-v2 .aw-v2-section__inner.container { max-width: 1250px; padding-left: 25px; padding-right: 25px; } @media (max-width: 991px) { .aw-v2 .aw-v2-section__inner.container { padding-left: 22px; padding-right: 22px; } .aw-v2 { --v2-page-gutter: 22px; } } @media (max-width: 575px) { .aw-v2 .aw-v2-section__inner.container { padding-left: 18px; padding-right: 18px; } .aw-v2 { --v2-page-gutter: 18px; } } .aw-v2-container--wide { max-width: 1560px; margin-inline: auto; } /* Keeps text in the middle of the page so left/right decor has room and can never overlap it. Used by #what-you-get, whose content is centred between two edge photos. */ .aw-v2 .aw-v2-section__inner.container.aw-v2-container--narrow { /* 720 leaves the middle column clear of the edge decor at 1350: the framed photos reach x=266 and the right photo starts at x=1020, so the text sits inside that with a gap on both sides rather than being overlapped. */ max-width: 720px; } /* Surfaces */ .aw-v2-bg--white { background-color: var(--v2-white); } .aw-v2-bg--cream { background-color: var(--v2-cream); } .aw-v2-bg--green { background-color: var(--v2-green); } .aw-v2-bg--blue { background-color: var(--v2-blue-surface); } .aw-v2-bg--yellow { background-color: var(--v2-yellow); } .aw-v2-bg--brown { background-color: var(--v2-brown); } .aw-v2-bg--dark { background-color: #1c1c1c; } .aw-v2-section__bg { position: absolute; inset: 0; background-size: cover; background-repeat: no-repeat; z-index: 0; } .aw-v2-section__bg--center { background-position: center; } .aw-v2-section__bg--top { background-position: center top; } .aw-v2-section__bg--bottom { background-position: center bottom; } .aw-v2-section__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; } .aw-v2-overlay { position: absolute; inset: 0; z-index: 1; pointer-events: none; } .aw-v2-overlay--light-25 { background: rgba(255, 255, 255, 0.25); } .aw-v2-overlay--light-60 { background: rgba(255, 255, 255, 0.60); } .aw-v2-overlay--light-85 { background: rgba(255, 255, 255, 0.85); } .aw-v2-overlay--dark-25 { background: rgba(0, 0, 0, 0.25); } .aw-v2-overlay--dark-50 { background: rgba(0, 0, 0, 0.50); } .aw-v2-overlay--dark-70 { background: rgba(0, 0, 0, 0.70); } .aw-v2-overlay--dark-85 { background: rgba(0, 0, 0, 0.85); } /* Content colour */ .aw-v2-content--light, .aw-v2-content--light .aw-v2-prose, .aw-v2-content--light .aw-v2-title { color: var(--v2-white); } .aw-v2-content--light a:not(.aw-v2-btn) { color: var(--v2-yellow); } /* The theme colours strong/b a dark gold, which fails contrast on a dark surface. The design uses white bold and reserves yellow for links. */ .aw-v2-content--light .aw-v2-prose strong, .aw-v2-content--light .aw-v2-prose b { color: inherit; } .aw-v2-content--dark, .aw-v2-content--dark .aw-v2-prose { color: var(--v2-dark); } /* Spacing scale */ .aw-v2-pt--none { padding-top: 0; } .aw-v2-pt--sm { padding-top: var(--v2-space-sm); } .aw-v2-pt--md { padding-top: var(--v2-space-md); } .aw-v2-pt--lg { padding-top: var(--v2-space-lg); } .aw-v2-pt--xl { padding-top: var(--v2-space-xl); } .aw-v2-pt--xxl { padding-top: var(--v2-space-xxl); } .aw-v2-pb--none { padding-bottom: 0; } .aw-v2-pb--sm { padding-bottom: var(--v2-space-sm); } .aw-v2-pb--md { padding-bottom: var(--v2-space-md); } .aw-v2-pb--lg { padding-bottom: var(--v2-space-lg); } .aw-v2-pb--xl { padding-bottom: var(--v2-space-xl); } .aw-v2-pb--xxl { padding-bottom: var(--v2-space-xxl); } .aw-v2-mt--none { margin-top: 0; } .aw-v2-mt--sm { margin-top: var(--v2-space-sm); } .aw-v2-mt--md { margin-top: var(--v2-space-md); } .aw-v2-mt--lg { margin-top: var(--v2-space-lg); } .aw-v2-mb--none { margin-bottom: 0; } .aw-v2-mb--sm { margin-bottom: var(--v2-space-sm); } .aw-v2-mb--md { margin-bottom: var(--v2-space-md); } .aw-v2-mb--lg { margin-bottom: var(--v2-space-lg); } /* Hairline borders — a repeating motif in this design */ .aw-v2-bt--yellow { border-top: 4px solid var(--v2-yellow); } .aw-v2-bt--blue { border-top: 4px solid var(--v2-blue-surface); } .aw-v2-bt--white { border-top: 4px solid var(--v2-white); } .aw-v2-bb--yellow { border-bottom: 4px solid var(--v2-yellow); } .aw-v2-bb--blue { border-bottom: 4px solid var(--v2-blue-surface); } .aw-v2-bb--white { border-bottom: 4px solid var(--v2-white); } /* Holds space on the right for a full-height edge photo. The content column then centres in what is left rather than in the viewport, which is the only way a fully-visible full-height photo and a centred column can coexist at 1350. Released below 992, where the photo is hidden anyway. */ @media (min-width: 992px) { .aw-v2-reserve-r--sm > .aw-v2-section__inner { margin-right: 280px; margin-left: auto; } .aw-v2-reserve-r--md > .aw-v2-section__inner { margin-right: 420px; margin-left: auto; } .aw-v2-reserve-r--lg > .aw-v2-section__inner { margin-right: 560px; margin-left: auto; } } /* Content backdrop. A full-height edge photo can be fully visible AND overlap the content column — the panel keeps the text readable and the faded edge lets the photo show through past it, so the overlap reads as deliberate. Drawn on a ::before at z-index -1 inside .aw-v2-section__inner, which already makes a stacking context at z-index 2, so the panel sits above the decor layer (1) but under the text. */ .aw-v2-backdrop--white > .aw-v2-section__inner, .aw-v2-backdrop--white-fade-right > .aw-v2-section__inner, .aw-v2-backdrop--white-fade-left > .aw-v2-section__inner { position: relative; } .aw-v2-backdrop--white > .aw-v2-section__inner::before, .aw-v2-backdrop--white-fade-right > .aw-v2-section__inner::before, .aw-v2-backdrop--white-fade-left > .aw-v2-section__inner::before { content: ""; position: absolute; top: -40px; bottom: -40px; left: -48px; right: -48px; z-index: -1; pointer-events: none; } .aw-v2-backdrop--white > .aw-v2-section__inner::before { background: var(--v2-white); } /* Solid across the text, then a short tail so the photo emerges rather than meeting a hard edge. */ .aw-v2-backdrop--white-fade-right > .aw-v2-section__inner::before { right: -140px; background: linear-gradient(to right, var(--v2-white) 0%, var(--v2-white) 78%, rgba(255, 255, 255, 0) 100%); } .aw-v2-backdrop--white-fade-left > .aw-v2-section__inner::before { left: -140px; background: linear-gradient(to left, var(--v2-white) 0%, var(--v2-white) 78%, rgba(255, 255, 255, 0) 100%); } @media (max-width: 991px) { /* Edge photos are hidden here, so the panel has nothing to sit over. */ .aw-v2-backdrop--white > .aw-v2-section__inner::before, .aw-v2-backdrop--white-fade-right > .aw-v2-section__inner::before, .aw-v2-backdrop--white-fade-left > .aw-v2-section__inner::before { display: none; } } .aw-v2-text--left { text-align: left; } .aw-v2-text--center { text-align: center; } .aw-v2-text--right { text-align: right; } /* ----------------------------------------------------------------- decor */ .aw-v2-decor-layer { position: absolute; /* Full viewport width regardless of the section's own width, and never clipped. body.aw-v2-page has overflow-x: clip, so 100vw cannot introduce a scrollbar. */ top: 0; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%); /* Never intercept a click meant for the content underneath. */ pointer-events: none; z-index: 1; } /* Reserved room at the foot of the section that PRECEDES top decor, so the artwork has somewhere to hang without landing on that section's content. Height comes from the image's own aspect ratio, set inline by section-outer.php. */ .aw-v2-decor-reserve { height: var(--aw-v2-decor-below-h, 0); pointer-events: none; } .aw-v2-decor { position: absolute; line-height: 0; pointer-events: none; } /* Explicit dimensions come from wp_get_attachment_image; height:auto keeps the intrinsic ratio so these large PNGs cannot shift layout. */ .aw-v2-decor__img { display: block; width: 100%; height: auto; max-width: none; } .aw-v2-decor--behind { z-index: 1; } /* Same layer as 'behind' (still under the content, which is z-index 2) but above other decor. Needed because later siblings otherwise paint over earlier ones. */ .aw-v2-decor--behind-top { z-index: 1; } .aw-v2-decor--front { z-index: 3; } .aw-v2-decor-layer .aw-v2-decor--behind-top { z-index: 2; } .aw-v2-decor-layer { z-index: 1; } /* Top / bottom decor spans the full layer width. */ .aw-v2-decor--top, .aw-v2-decor--bottom { left: 0; right: 0; } /* Top decor hangs entirely ABOVE its section: its bottom edge sits on the section's top edge. The preceding section reserves the height (see .aw-v2-decor-reserve), so the artwork overlays that section's background and not its content. The overflow setting now only controls how far it dips back DOWN into its own section. */ /* -2px so the artwork's base overlaps the section edge by a hair. The layer height is calc(100vw / ratio), which lands on a fractional pixel at most widths, and without the overlap that rounding shows as a 1px seam between the PNG's green and the section's. */ .aw-v2-decor--top { bottom: 100%; top: auto; margin-bottom: -2px; } /* Growth cap for a full-width top silhouette (opt-in via the decor's "Stop Growing Past" field — see aw_v2_decor()). * * A full-width image's height follows its width, so a treeline keeps getting taller as * the viewport widens. Capping it cannot be done by setting a height on the IMAGE, which * would squash it, nor by object-fit: cover, which would eat the tree tops. Instead the * WRAPPER takes the capped height and clips: the image inside keeps width:100% and * height:auto, so it is never distorted and still spans the full width, and what gets * trimmed is the bottom of the PNG's solid base — which is the section colour anyway, and * whose cut edge lands on the section edge exactly where the image's own bottom used to. * * The custom properties are set inline per image (its own aspect ratio and chosen cap), * so one rule serves every cap value. Below the cap min() yields 100vw and nothing * changes at all. */ .aw-v2-decor--capped { height: calc( min( 100vw, var( --aw-v2-decor-cap, 100vw ) ) / var( --aw-v2-decor-ratio, 1 ) ); overflow: hidden; } .aw-v2-decor--bottom { top: 100%; bottom: auto; } .aw-v2-decor--top.aw-v2-decor--over-none { transform: translateY(0); } .aw-v2-decor--top.aw-v2-decor--over-sm { transform: translateY(8%); } .aw-v2-decor--top.aw-v2-decor--over-md { transform: translateY(16%); } .aw-v2-decor--top.aw-v2-decor--over-lg { transform: translateY(26%); } .aw-v2-decor--top.aw-v2-decor--over-half { transform: translateY(50%); } .aw-v2-decor--bottom.aw-v2-decor--over-none { transform: translateY(0); } .aw-v2-decor--bottom.aw-v2-decor--over-sm { transform: translateY(-8%); } .aw-v2-decor--bottom.aw-v2-decor--over-md { transform: translateY(-16%); } .aw-v2-decor--bottom.aw-v2-decor--over-lg { transform: translateY(-26%); } .aw-v2-decor--bottom.aw-v2-decor--over-half { transform: translateY(-50%); } /* Left / right edge decor bleeds off the viewport. */ .aw-v2-decor--left, .aw-v2-decor--right { top: 50%; width: 24vw; max-width: 380px; } /* Framed photos read smaller and sit further onto the page than a bleeding photo. */ .aw-v2-decor--polaroid.aw-v2-decor--left, .aw-v2-decor--polaroid.aw-v2-decor--right { width: 20vw; max-width: 290px; } .aw-v2-decor--left { left: 0; transform: translate(-35%, -50%); } .aw-v2-decor--right { right: 0; transform: translate(35%, -50%); } .aw-v2-decor--left.aw-v2-decor--over-sm { transform: translate(-15%, -50%); } .aw-v2-decor--left.aw-v2-decor--over-lg { transform: translate(-55%, -50%); } .aw-v2-decor--right.aw-v2-decor--over-sm { transform: translate(15%, -50%); } .aw-v2-decor--right.aw-v2-decor--over-lg { transform: translate(55%, -50%); } /* Decor treatments. The design frames the photo stack that bleeds off the left edge as polaroids; the climbing-wall shot on the right is a plain bleed. */ .aw-v2-decor--polaroid { --aw-v2-frame: url("../assets/aw-v2-img/polaroid-frame.png"); position: absolute; aspect-ratio: 957 / 1200; background: none; padding: 0; box-shadow: none; } .aw-v2-decor--polaroid .aw-v2-decor__img { position: absolute; left: 8.46%; top: 6.25%; width: 83.7%; height: 86.67%; object-fit: cover; } .aw-v2-decor--polaroid::after { content: ""; position: absolute; inset: 0; background-image: var(--aw-v2-frame); background-size: 100% 100%; background-repeat: no-repeat; pointer-events: none; } .aw-v2-decor--polaroid-landscape { --aw-v2-frame: url("../assets/aw-v2-img/polaroid-frame-landscape.png"); position: absolute; aspect-ratio: 1200 / 957; background: none; padding: 0; box-shadow: none; } .aw-v2-decor--polaroid-landscape .aw-v2-decor__img { position: absolute; left: 7.08%; top: 8.46%; width: 86.67%; height: 83.7%; object-fit: cover; } .aw-v2-decor--polaroid-landscape::after { content: ""; position: absolute; inset: 0; background-image: var(--aw-v2-frame); background-size: 100% 100%; background-repeat: no-repeat; pointer-events: none; } /* Landscape frames read wider than tall, so give them a bit more room. */ .aw-v2-decor--polaroid-landscape.aw-v2-decor--left, .aw-v2-decor--polaroid-landscape.aw-v2-decor--right { width: 26vw; max-width: 380px; } .aw-v2-decor--framed { border: 8px solid #fff; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18); } /* Fades the inner edge so a bleeding photo does not end on a hard vertical line. */ .aw-v2-decor--soft.aw-v2-decor--right .aw-v2-decor__img { -webkit-mask-image: linear-gradient(to left, #000 62%, transparent 100%); mask-image: linear-gradient(to left, #000 62%, transparent 100%); } .aw-v2-decor--soft.aw-v2-decor--left .aw-v2-decor__img { -webkit-mask-image: linear-gradient(to right, #000 62%, transparent 100%); mask-image: linear-gradient(to right, #000 62%, transparent 100%); } /* Two decor images on the same edge form a stack (the design's pair of polaroids). Without this they would sit at identical coordinates and fully overlap. */ .aw-v2-decor--left:nth-of-type(2), .aw-v2-decor--right:nth-of-type(2) { top: 50%; } .aw-v2-decor--left:nth-of-type(1) { transform: translate(-18%, -74%) rotate(var(--aw-v2-decor-rot, -4deg)); } .aw-v2-decor--left:nth-of-type(2) { transform: translate(-12%, -4%) rotate(var(--aw-v2-decor-rot, 3deg)); } .aw-v2-decor--right:nth-of-type(1) { transform: translate(32%, -50%) rotate(var(--aw-v2-decor-rot, 0deg)); } /* Explicit tilt choice overrides the default stack rotation. */ .aw-v2-decor--tilt-left { --aw-v2-decor-rot: -5deg; } .aw-v2-decor--tilt-right { --aw-v2-decor-rot: 5deg; } /* Fill the section top-to-bottom. The decor layer already spans the section box (padding included), so stretching to the layer is what "regardless of padding" means. Prefixed with .aw-v2 to outrank the nth-of-type positioning rules above. */ .aw-v2 .aw-v2-decor--h-section { top: 0; bottom: 0; height: auto; /* Width follows from the height so the whole image is shown. A fixed width with object-fit: cover cropped the sides off, which is not what a full-height edge photo should do. */ width: auto; max-width: none; } .aw-v2 .aw-v2-decor--h-section .aw-v2-decor__img { height: 100%; width: auto; max-width: none; object-fit: contain; } .aw-v2 .aw-v2-decor--left.aw-v2-decor--h-section { transform: translateX(-32%); } .aw-v2 .aw-v2-decor--right.aw-v2-decor--h-section { transform: translateX(32%); } /* 'none' has to mean zero offset — without these the base 32% above applied even when the editor asked for no overflow, pushing a third of the image off-screen. */ .aw-v2 .aw-v2-decor--left.aw-v2-decor--h-section.aw-v2-decor--over-none { transform: none; } .aw-v2 .aw-v2-decor--right.aw-v2-decor--h-section.aw-v2-decor--over-none { transform: none; } .aw-v2 .aw-v2-decor--left.aw-v2-decor--h-section.aw-v2-decor--over-sm { transform: translateX(-15%); } .aw-v2 .aw-v2-decor--right.aw-v2-decor--h-section.aw-v2-decor--over-sm { transform: translateX(15%); } .aw-v2 .aw-v2-decor--left.aw-v2-decor--h-section.aw-v2-decor--over-lg { transform: translateX(-55%); } .aw-v2 .aw-v2-decor--right.aw-v2-decor--h-section.aw-v2-decor--over-lg { transform: translateX(55%); } .aw-v2-decor--w-full { width: 100%; } .aw-v2-decor--w-lg { width: 70%; } .aw-v2-decor--w-md { width: 50%; } .aw-v2-decor--w-sm { width: 30%; } .aw-v2-decor--align-center.aw-v2-decor--w-lg, .aw-v2-decor--align-center.aw-v2-decor--w-md, .aw-v2-decor--align-center.aw-v2-decor--w-sm { left: 50%; right: auto; } .aw-v2-decor--align-center.aw-v2-decor--top.aw-v2-decor--w-md { transform: translate(-50%, -50%); } .aw-v2-decor--align-center.aw-v2-decor--bottom.aw-v2-decor--w-md { transform: translate(-50%, 50%); } .aw-v2-decor--align-left { left: 0; right: auto; } .aw-v2-decor--align-right { right: 0; left: auto; } /* Hold an edge image with the content instead of the window (opt-in via the decor's "Hold Position Past" field). * * The decor layer is 100vw centred on the viewport, so `left: 0` is the WINDOW's edge and * an edge photo drifts further from the centred content the wider the screen gets. Half * the surplus width is exactly the offset that keeps it where it sat at the hold width. * Below that width max() yields 0 and nothing changes at all. * * Two classes deep so this beats .aw-v2-decor--align-left/right and .aw-v2-decor--left * /right, which all set left/right at (0,1,0). Only left/right are touched, so the * transform-based overflow and tilt rules still compose on top. */ .aw-v2-decor--left.aw-v2-decor--held { left: max( 0px, ( 100vw - var( --aw-v2-decor-hold, 100vw ) ) / 2 ); } .aw-v2-decor--right.aw-v2-decor--held { right: max( 0px, ( 100vw - var( --aw-v2-decor-hold, 100vw ) ) / 2 ); } /* ------------------------------------------------------------------ type */ .aw-v2-title { margin: 0 0 0.5em; line-height: 1.05; /* style.css sets `h1..h6 { color:#402e00 }`. An element selector loses to this class, so titles inherit the section's content colour unless .aw-v2-color--* sets one explicitly. */ color: inherit; } .aw-v2-title--display { font-family: var(--v2-font-display); font-weight: 800; line-height: 0.95; /* The theme uppercases headings globally; the design sets its display titles in title case, so the editor's own capitalisation must win here. */ text-transform: none; } .aw-v2-title--heading { font-family: var(--v2-font-heading); font-weight: 600; text-transform: uppercase; line-height: 1.5; } /* Large display-cap headings want tighter leading than the 1.5 body-ish default. */ .aw-v2-title--heading.aw-v2-title--xl { line-height: 1.5; } /* Capped at 26px: at 28px the design's second heading line no longer fits on one line in the measured column width, and the design sets it as two lines. */ /* Sizes are expressed so the vw term hits the target at the 1350px design width and scales down from there. 1vw = 13.5px at 1350. */ .aw-v2-title--sm { font-size: clamp(1.25rem, 1.78vw, 1.5rem); } /* 24px @1350 */ .aw-v2-title--md { font-size: clamp(1.5rem, 2.37vw, 2rem); } /* 32px @1350 */ .aw-v2-title--lg { font-size: clamp(1.75rem, 2.96vw, 2.5rem); } /* 40px @1350 */ .aw-v2-title--xl { font-size: clamp(2rem, 3.70vw, 3.125rem); } /* 50px @1350 */ /* The display face runs much larger than the heading face at the same step. */ .aw-v2-title--display.aw-v2-title--sm { font-size: clamp(1.25rem, 1.78vw, 1.5rem); } /* 24px @1350 */ .aw-v2-title--display.aw-v2-title--md { font-size: clamp(1.5rem, 2.37vw, 2rem); } /* 32px @1350 */ .aw-v2-title--display.aw-v2-title--lg { font-size: clamp(1.75rem, 3.11vw, 2.625rem); } /* 42px @1350 */ /* xl is reserved for the hero accent. */ .aw-v2-title--display.aw-v2-title--xl { font-size: clamp(2.25rem, 4.74vw, 4rem); } /* 64px @1350 */ /* Prefixed with .aw-v2 so these beat `.aw-v2-content--light .aw-v2-title`, which is also two classes deep — otherwise an explicit colour choice loses to the section's light/dark setting, which is how the hero's yellow accent was rendering white. */ .aw-v2 .aw-v2-color--blue { color: var(--v2-blue-surface); } .aw-v2 .aw-v2-color--green { color: var(--v2-green); } .aw-v2 .aw-v2-color--yellow { color: var(--v2-yellow); } .aw-v2 .aw-v2-color--brown { color: var(--v2-brown); } .aw-v2 .aw-v2-color--white { color: var(--v2-white); } .aw-v2 .aw-v2-color--dark { color: var(--v2-dark); } .aw-v2-align--left { text-align: left; } .aw-v2-align--center { text-align: center; } .aw-v2-align--right { text-align: right; } .aw-v2-prose { font-size: 1.0625rem; line-height: 1.7; } /* The theme sets an explicit `p { font-size: 14px }` (and others) globally, which beats inheritance — so every paragraph inside a prose block was rendering at 14px no matter what the container asked for. 11 of 12 prose blocks on this page were affected, including the testimonial quote's clamp. Paragraphs must inherit from their container. */ .aw-v2 .aw-v2-prose p, .aw-v2 .aw-v2-prose li { font-size: inherit; line-height: inherit; } .aw-v2-prose > :first-child { margin-top: 0; } .aw-v2-prose > :last-child { margin-bottom: 0; } .aw-v2-prose a { text-decoration: underline; text-underline-offset: 2px; } .aw-v2-maxw--narrow { max-width: var(--v2-maxw-narrow); margin-inline: auto; } .aw-v2-maxw--normal { max-width: var(--v2-maxw-normal); margin-inline: auto; } .aw-v2-maxw--wide { max-width: var(--v2-maxw-wide); margin-inline: auto; } .aw-v2-maxw--full { max-width: none; } /* --------------------------------------------------------------- buttons */ .aw-v2-buttons { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 28px; } .aw-v2-buttons--left { justify-content: flex-start; } .aw-v2-buttons--center { justify-content: center; } .aw-v2-buttons--right { justify-content: flex-end; } .aw-v2-btn { display: inline-flex; align-items: center; justify-content: center; /* 44px minimum touch target */ min-height: 44px; padding: 12px 30px; font-family: var(--v2-font-heading); font-size: 1.0625rem; text-transform: uppercase; text-decoration: none; letter-spacing: 0.02em; border: 2px solid transparent; transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; } .aw-v2-btn:hover, .aw-v2-btn:focus-visible { text-decoration: none; } .aw-v2-btn--primary { background: var(--v2-blue-surface); color: var(--v2-white); } .aw-v2-btn--primary:hover, .aw-v2-btn--primary:focus-visible { background: #5a90c4; color: var(--v2-white); } .aw-v2-btn--yellow { background: var(--v2-yellow); color: var(--v2-brown); } .aw-v2-btn--yellow:hover, .aw-v2-btn--yellow:focus-visible { background: #e2a30f; color: var(--v2-brown); } /* Gold and olive, sampled off the Open House date-ladder design (#FCC84E / #AFB042). ⚠ Both carry WHITE label text as the design specifies, which measures ~1.6:1 and ~2.6:1 against those fills — below the 4.5:1 this project treats as its floor (.claude/rules/lighthouse-budget.md). Implemented as designed and flagged rather than silently altered; --btn-gold-ink / --btn-olive-ink exist so the label can be darkened in one line if that call is made. */ /* The site's own gold (--yellow / #fdb714), not the #fcc84e sampled off the design PNG, which read visibly lighter next to everything else on the page. `gold` therefore differs from `yellow` only in its label colour: white here, brown there. */ .aw-v2-btn--gold { background: var(--v2-yellow); color: var(--aw-btn-gold-ink, var(--v2-white)); } .aw-v2-btn--gold:hover, .aw-v2-btn--gold:focus-visible { background: #e2a30f; color: var(--aw-btn-gold-ink, var(--v2-white)); } .aw-v2-btn--olive { background: #afb042; color: var(--aw-btn-olive-ink, var(--v2-white)); } .aw-v2-btn--olive:hover, .aw-v2-btn--olive:focus-visible { background: #9b9c36; color: var(--aw-btn-olive-ink, var(--v2-white)); } .aw-v2-btn--outline-light { border-color: var(--v2-white); color: var(--v2-white); } .aw-v2-btn--outline-light:hover { background: var(--v2-white); color: var(--v2-dark); } .aw-v2-btn--outline-dark { border-color: var(--v2-dark); color: var(--v2-dark); } .aw-v2-btn--outline-dark:hover { background: var(--v2-dark); color: var(--v2-white); } /* ------------------------------------------------------------------ rows */ .aw-v2-row + .aw-v2-row { margin-top: 48px; } .aw-v2-row--title-only { margin-bottom: 0; } .aw-v2-row--title-only .aw-v2-title { margin-bottom: 0; } /* Media hero */ .aw-v2-row--media-hero { position: relative; } .aw-v2-hero__media { position: relative; line-height: 0; } .aw-v2-hero__img { display: block; width: 100%; height: 100%; object-fit: cover; } .aw-v2-hero--sm .aw-v2-hero__media { height: clamp(260px, 34vw, 420px); } .aw-v2-hero--md .aw-v2-hero__media { height: clamp(340px, 44vw, 620px); } .aw-v2-hero--lg .aw-v2-hero__media { height: clamp(420px, 56vw, 780px); } .aw-v2-hero--vh .aw-v2-hero__media { height: 100vh; } .aw-v2-hero__img--mobile { display: none; } .aw-v2-hero__caption { position: absolute; left: 0; right: 0; bottom: 0; padding: 28px 20px; text-align: center; } .aw-v2-hero--cap-center .aw-v2-hero__caption { top: 0; display: flex; align-items: center; justify-content: center; } .aw-v2-hero--scrim-light .aw-v2-hero__caption { background: rgba(0, 0, 0, 0.25); } .aw-v2-hero--scrim-medium .aw-v2-hero__caption { background: rgba(0, 0, 0, 0.45); } .aw-v2-hero--scrim-heavy .aw-v2-hero__caption { background: rgba(0, 0, 0, 0.65); } /* Hero caption type, per spec: heading Oswald 50/75 (150%) w400 uppercase accent Alkaline 90/85 w800 #FCB613 */ .aw-v2-hero__heading { margin-bottom: 0.1em; font-family: var(--v2-font-heading); font-weight: 400; line-height: 1.5; text-transform: uppercase; } .aw-v2-hero__accent { margin-bottom: 0; font-family: var(--v2-font-display); font-weight: 800; line-height: 0.944; color: var(--v2-yellow); } /* Keep the caption's translucent band over no more than half the hero image. * * The band is only as tall as its text, and at mobile widths the hero media is a FIXED * 340px (the floor of its clamp) while the caption keeps growing as lines wrap. Measured * on Open House at 390px: accent and heading both wrapped to two lines, giving a 223px * caption over a 340px image — 66%, which is what was swallowing the photo. * * clamp() on the viewport rather than a second breakpoint, because the trouble is caused * by wrapping and wrapping tracks width continuously. One rule then covers 320px through * 767px: the type shrinks just enough at each width that the band stays under half. * * Specificity is three classes deliberately — the sizes these override come from * .aw-v2-title--display.aw-v2-title--xl, which is (0,2,0). * * ⚠ This is sized to fit, not hard-clipped. A deliberate choice: a max-height with * overflow:hidden would silently swallow the end of a caption, and silent is the worst * failure. Headroom measured at the tightest real case is ~47px at 320px and ~28px at * 390px, i.e. roughly one more wrapped line. A caption longer than these would need * shorter copy or another step down, and would show up as a band creeping past half * rather than as missing words. */ @media (max-width: 767px) { .aw-v2 .aw-v2-hero__caption { padding: 20px 18px; } .aw-v2 .aw-v2-row--media-hero .aw-v2-hero__accent { font-size: clamp( 25px, 8.7vw, 34px ); line-height: 1; } .aw-v2 .aw-v2-row--media-hero .aw-v2-hero__heading { font-size: clamp( 18px, 6.15vw, 24px ); line-height: 1.28; } } /* Text + media */ .aw-v2-tm--media-left .row { flex-direction: row-reverse; } /* Media column ratio. The design's intro polaroid occupies roughly a third of the row, not half, which is what kept the heading wrapping onto extra lines. */ @media (min-width: 992px) { /* Design measures the text column at ~910/1320 and the polaroid at ~388/1320. */ .aw-v2-tm--mw-narrow .aw-v2-tm__text { flex: 0 0 68%; max-width: 68%; } .aw-v2-tm--mw-narrow .aw-v2-tm__media { flex: 0 0 28%; max-width: 28%; margin-left: 4%; } .aw-v2-tm--mw-half .aw-v2-tm__text, .aw-v2-tm--mw-half .aw-v2-tm__media { flex: 0 0 50%; max-width: 50%; } .aw-v2-tm--mw-wide .aw-v2-tm__text { flex: 0 0 38%; max-width: 38%; } .aw-v2-tm--mw-wide .aw-v2-tm__media { flex: 0 0 58%; max-width: 58%; margin-left: 4%; } /* media-left reverses the row, so the gutter has to swap sides too */ .aw-v2-tm--media-left.aw-v2-tm--mw-narrow .aw-v2-tm__media, .aw-v2-tm--media-left.aw-v2-tm--mw-wide .aw-v2-tm__media { margin-left: 0; margin-right: 4%; } } /* A list written in the Body renders with the chosen curated icon as its bullet. One cached file regardless of how many items, same reasoning as the checklist row. */ .aw-v2-tm__body ul { list-style: none; margin: 0; padding: 0; } .aw-v2-tm--svg-bullets .aw-v2-tm__body ul > li { position: relative; padding-left: 44px; margin-bottom: 1.1em; } .aw-v2-tm__body strong, .aw-v2-tm__body b { text-transform: uppercase; } .aw-v2-tm--svg-bullets .aw-v2-tm__body ul > li::before { content: ""; position: absolute; left: 0; top: 0.12em; width: 26px; aspect-ratio: var(--aw-v2-bullet-ratio, 1); background-image: var(--aw-v2-bullet); background-repeat: no-repeat; background-position: center; background-size: contain; } .aw-v2-tm__icon { margin-bottom: 16px; } .aw-v2-tm__icon--left { text-align: left; } .aw-v2-tm__icon--center { text-align: center; } .aw-v2-tm__icon--right { text-align: right; } .aw-v2-tm__icon--left .aw-v2-tm__icon-svg { margin-left: 0; margin-right: auto; } .aw-v2-tm__icon--center .aw-v2-tm__icon-svg { margin-left: auto; margin-right: auto; } .aw-v2-tm__icon--right .aw-v2-tm__icon-svg { margin-left: auto; margin-right: 0; } .aw-v2-tm__icon-img { width: auto; max-width: 120px; height: auto; } .aw-v2-tm__subheading { font-family: var(--v2-font-heading); text-transform: uppercase; color: var(--v2-blue-surface); font-size: 1.25rem; margin: 0 0 0.6em; } .aw-v2-tm--valign-top .row { align-items: flex-start !important; } .aw-v2-tm--valign-bottom .row { align-items: flex-end !important; } .aw-v2-tm--single .aw-v2-tm__text, .aw-v2-tm--single .aw-v2-tm__media { max-width: 100%; flex: 0 0 100%; } .aw-v2-figure { margin: 0; } .aw-v2-figure__img { display: block; width: 100%; height: auto; } /* Polaroid frame is a real image asset (assets/aw-v2-img/polaroid-frame.png, 957x1200 with a transparent window). The photo sits in the window and the frame is drawn over it, so the paper texture and torn edges are the designed artwork rather than a CSS approximation. Window measured off the PNG's alpha channel. */ .aw-v2-figure--polaroid { --aw-v2-frame: url("../assets/aw-v2-img/polaroid-frame.png"); position: relative; aspect-ratio: 957 / 1200; background: none; padding: 0; box-shadow: none; } .aw-v2-figure--polaroid .aw-v2-figure__img { position: absolute; left: 8.46%; top: 6.25%; width: 83.7%; height: 86.67%; object-fit: cover; } .aw-v2-figure--polaroid::after { content: ""; position: absolute; inset: 0; background-image: var(--aw-v2-frame); background-size: 100% 100%; background-repeat: no-repeat; pointer-events: none; } /* Landscape variant of the same frame artwork (1200x957). The window swaps with it, so the insets are measured off the rotated file rather than derived from the portrait one. */ .aw-v2-figure--polaroid-landscape { --aw-v2-frame: url("../assets/aw-v2-img/polaroid-frame-landscape.png"); position: relative; aspect-ratio: 1200 / 957; background: none; padding: 0; box-shadow: none; } .aw-v2-figure--polaroid-landscape .aw-v2-figure__img { position: absolute; left: 7.08%; top: 8.46%; width: 86.67%; height: 83.7%; object-fit: cover; } .aw-v2-figure--polaroid-landscape::after { content: ""; position: absolute; inset: 0; background-image: var(--aw-v2-frame); background-size: 100% 100%; background-repeat: no-repeat; pointer-events: none; } .aw-v2-figure--framed { border: 10px solid var(--v2-white); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18); } .aw-v2-figure--rounded .aw-v2-figure__img { border-radius: 14px; } .aw-v2-figure--tilt-left { transform: rotate(-3deg); } .aw-v2-figure--tilt-right { transform: rotate(3deg); } /* Media that overflows its section, e.g. the illustrated camp map */ .aw-v2-tm--overflow-top .aw-v2-tm__media { margin-top: clamp(-180px, -12vw, -60px); } .aw-v2-tm--overflow-bottom .aw-v2-tm__media { margin-bottom: clamp(-180px, -12vw, -60px); } /* Curated theme icons. Drawn as a background-image so the file caches once and the markup stays small — see aw_v2_icon() for why. aspect-ratio is set inline from the SVG's own viewBox, which reserves the box and keeps CLS at zero. */ .aw-v2-icon { display: block; width: 100%; max-width: 92px; background-image: var(--aw-v2-icon); background-repeat: no-repeat; background-position: center; background-size: contain; } .aw-v2-align--center .aw-v2-icon, .aw-v2-text--center .aw-v2-icon { margin-inline: auto; } .aw-v2-icon-item__svg { max-width: 88px; } .aw-v2-tm__icon-svg { max-width: 120px; margin-inline: 0; } /* The tent sits above a display title and reads larger in the design. `lg` is that original size and stays the default, so page 27544 is unaffected. */ .aw-v2-row--text-media .aw-v2-tm__icon-svg { max-width: 190px; } .aw-v2-row--text-media.aw-v2-tm--eyebrow-lg .aw-v2-tm__icon-svg { max-width: 190px; } .aw-v2-row--text-media.aw-v2-tm--eyebrow-md .aw-v2-tm__icon-svg { max-width: 125px; } .aw-v2-row--text-media.aw-v2-tm--eyebrow-sm .aw-v2-tm__icon-svg { max-width: 92px; } /* Icon list */ .aw-v2-row--icon-list, .aw-v2-row--checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 40px; } .aw-v2-cols--1 { grid-template-columns: 1fr; } .aw-v2-cols--2 { grid-template-columns: repeat(2, 1fr); } .aw-v2-cols--3 { grid-template-columns: repeat(3, 1fr); } .aw-v2-cols--4 { grid-template-columns: repeat(4, 1fr); } .aw-v2-row--icon-list.aw-v2-cols--1 { max-width: 620px; margin-inline: auto; } .aw-v2-icon-item__body { max-width: 540px; margin-inline: auto; } .aw-v2-icon-item__icon { margin-bottom: 14px; } .aw-v2-icon-item__img { width: auto; max-width: 92px; height: auto; margin-inline: auto; } .aw-v2-icon-item__heading { font-family: var(--v2-font-heading); text-transform: uppercase; color: var(--v2-blue-surface); font-size: 1.3rem; margin: 0 0 0.35em; } .aw-v2-icons--inline .aw-v2-icon-item { display: flex; align-items: flex-start; gap: 18px; text-align: left; } .aw-v2-icons--inline .aw-v2-icon-item__icon { flex: 0 0 auto; margin-bottom: 0; } /* Checklist */ .aw-v2-row--checklist { gap: 22px; } .aw-v2-checklist__item { display: flex; align-items: flex-start; gap: 14px; text-align: left; } .aw-v2-checklist__bullet { flex: 0 0 auto; line-height: 0; } .aw-v2-checklist__bullet-img { width: 26px; height: auto; } /* SVG bullet: one cached file, drawn per item via the custom property the row sets. */ .aw-v2-checklist--svg-bullet .aw-v2-checklist__item::before { content: ""; flex: 0 0 auto; width: 26px; aspect-ratio: var(--aw-v2-bullet-ratio, 1); margin-top: 0.15em; background-image: var(--aw-v2-bullet); background-repeat: no-repeat; background-position: center; background-size: contain; } .aw-v2-row--checklist:not(.aw-v2-checklist--custom-bullet):not(.aw-v2-checklist--svg-bullet) .aw-v2-checklist__item::before { content: ""; flex: 0 0 auto; width: 10px; height: 10px; margin-top: 0.55em; border-radius: 50%; background: var(--v2-yellow); } /* Date cards */ .aw-v2-row--date-cards { display: grid; /* Two named rows so every card's header occupies the same band and they all line up regardless of how the date text wraps. Cards opt in with subgrid below. row-gap and column-gap MUST stay separate: a card using subgrid inherits this grid's ROW gap between its own header and body, so a shared `gap` made the between-cards spacing and the header/body spacing the same number. */ grid-template-rows: auto 1fr; row-gap: 28px; column-gap: 28px; } /* Between-cards spacing only — never row-gap, per the note above. */ .aw-v2-cardgap--sm { column-gap: 28px; } .aw-v2-cardgap--md { column-gap: 56px; } .aw-v2-cardgap--lg { column-gap: 88px; } .aw-v2-cardgap--xl { column-gap: 120px; } .aw-v2-card { position: relative; display: grid; grid-row: span 2; grid-template-rows: subgrid; /* The ribbon extends past the card, so this must not clip. */ overflow: visible; } /* A card with no body should end at its header rather than stretch across the second grid track. * * ⚠ Two traps here, both found by measuring rather than assuming: * 1. `.aw-v2-card { grid-row: span 2 }` is (0,1,0) and sits LATER in this file, so an * unqualified `.aw-v2-card--no-body` loses on source order. Qualified with the row * class it is (0,2,0) and wins wherever it sits. * 2. Setting `grid-template-rows: auto` on the row is NOT enough on its own — a child * still spanning 2 rows creates the second track implicitly. The span has to go * first, and then the row's own row-gap has nothing to sit between. Before this, * the computed template was still `141.78px 2px` with 30px of dead space per card. */ .aw-v2-row--date-cards .aw-v2-card--no-body { grid-row: span 1; } /* When NO card has a body, drop the second track entirely: collapsing it to zero height would still leave the row-gap between the two tracks, which is the gap that showed under each date band. */ .aw-v2-row--date-cards.aw-v2-cards--no-bodies { grid-template-rows: auto; } /* Without subgrid the cards fall back to a normal block flow, which is the old behaviour rather than a broken one. */ @supports not (grid-template-rows: subgrid) { .aw-v2-card { display: flex; flex-direction: column; } } .aw-v2-cards--bordered .aw-v2-card { border: 2px solid var(--v2-white); } .aw-v2-cards--solid .aw-v2-card { background: rgba(0, 0, 0, 0.55); } .aw-v2-cards--shadow .aw-v2-card { background: var(--v2-white); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18); } .aw-v2-card__header { background: var(--v2-blue-surface); color: var(--v2-white); padding: 32px 18px 30px; text-align: center; } .aw-v2-card__heading { font-family: var(--v2-font-heading); text-transform: uppercase; font-size: 1.7rem; margin: 0; /* Beat style.css's global h1-h6 colour so the header's white is inherited. */ color: inherit; } .aw-v2-card__subheading { margin: 0.15em 0 0; font-size: 1.25rem; } .aw-v2-card__body { padding: 10px 30px 56px; text-align: center; flex: 1 1 auto; font-size: 1.125rem; line-height: 1.66; /* The design's cards are a fixed box (measured: 536 tall, header 134 + body 402) with slack under the shorter cards, so the grid needs a floor rather than sizing purely to the longest card's text. Released below 768px. */ min-height: 402px; } /* Supplied ribbon artwork. Already tilted in the file, so no rotation here. */ .aw-v2-card__badge-img { position: absolute; /* Sized so the ribbon overlaps the card's top-left corner. */ top: -55px; left: -28px; z-index: 4; width: 52%; max-width: 200px; line-height: 0; pointer-events: none; } .aw-v2-card__badge-img img { display: block; width: 100%; height: auto; filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.25)); } /* Diagonal ribbon across the card's top-left corner, extending outside it */ .aw-v2-card__badge { position: absolute; /* Sits across the card's top-left corner, mostly ABOVE it, as in the design. Keeping it out of the header's flow is what lets every card header stay the same height whether or not it carries a ribbon. Lifted far enough that it clears the date text below rather than clipping it. */ top: -34px; left: -22px; z-index: 4; transform: rotate(-11deg); padding: 8px 24px; font-family: var(--v2-font-heading); text-transform: uppercase; font-size: 0.88rem; line-height: 1.15; max-width: 78%; box-shadow: 0 6px 14px rgba(0, 0, 0, 0.28); } .aw-v2-card__badge--yellow { background: var(--v2-yellow); color: var(--v2-brown); } .aw-v2-card__badge--blue { background: var(--v2-blue-surface); color: var(--v2-white); } .aw-v2-card__badge--white { background: var(--v2-white); color: var(--v2-dark); } /* No header padding modifier: the ribbon is positioned outside the header flow. */ /* Testimonials */ .aw-v2-stars { color: var(--v2-yellow); font-size: 2rem; letter-spacing: 0.12em; margin: 0 0 0.4em; } .aw-v2-testimonial { margin: 0; max-width: 820px; margin-inline: auto; } /* The design's own quote mark, not a typographic glyph. */ .aw-v2-testimonial__mark { display: block; width: 84px; aspect-ratio: 84 / 70; margin-inline: auto; margin-top: 10px; margin-bottom: 20px; /* The export is blue at 34% opacity, which all but disappears on the blue band. */ filter: brightness(0.5); background-image: url("../assets/aw-v2-icons/icon-quote-mark.svg"); background-repeat: no-repeat; background-position: center; background-size: contain; } .aw-v2-align--left .aw-v2-testimonial__mark { margin-left: 0; } .aw-v2-align--right .aw-v2-testimonial__mark { margin-right: 0; } .aw-v2-testimonial__quote { margin: 0; border: 0; padding: 0; font-size: clamp(1.1rem, 1.8vw, 1.5rem); font-style: italic; line-height: 1.5; } .aw-v2-testimonial__attribution { font-family: var(--v2-font-display); font-size: 1.6rem; margin-top: 0.6em; } /* Carousel. The track is a scroll-snap strip so it still works with no JS at all; js/aw-v2-carousel.js adds the arrows, dots and mouse dragging on top. ⚠ The bug this replaces: the slide had `flex: 0 0 100%` while `.aw-v2-testimonial` above still capped it at `max-width: 820px`. max-width wins over flex-basis, so each slide was 820px inside a 1200px track — the first quote sat left of centre with the second peeking in on the right, and because the track was never wider than its content there was nothing to snap between. The cap now moves to the slide's CHILDREN, so a slide is a true 100% column and the quote inside it keeps the single-testimonial measure. */ .aw-v2-testimonials--carousel .aw-v2-testimonials__track { display: flex; /* No gap: one slide per view means the stride is exactly the track width, which is what keeps the JS index and the scroll position in agreement. */ gap: 0; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; /* Let a vertical swipe scroll the page and a horizontal one move the carousel. */ touch-action: pan-y; } .aw-v2-testimonials--carousel .aw-v2-testimonials__track::-webkit-scrollbar { display: none; } .aw-v2-testimonials--carousel .aw-v2-testimonial { flex: 0 0 100%; max-width: none; scroll-snap-align: start; } /* Each quote keeps the measure it has when there is only one of them. */ .aw-v2-testimonials--carousel .aw-v2-testimonial > * { max-width: 820px; margin-inline: auto; } /* While dragging, suppress the text selection that follows the cursor. */ .aw-v2-testimonials__track.is-dragging { cursor: grabbing; user-select: none; } .aw-v2-carousel--ready .aw-v2-testimonials__track { cursor: grab; } /* --- carousel controls (built by JS, so they never appear without it) --- */ .aw-v2-carousel__nav { display: flex; align-items: center; justify-content: center; gap: 18px; /* No top margin — the attribution above it already carries the spacing. */ margin-top: 0; } /* Currently unrendered: the JS stopped building the arrows on 2026-08-26 (dots only, on both pages). Kept so restoring them is a one-block change in js/aw-v2-carousel.js rather than a rebuild. */ .aw-v2-carousel__arrow { appearance: none; background: none; /* 44px minimum touch target (mobile-defaults.md). The chevron inside is small; the hit area is not. */ width: 44px; height: 44px; padding: 0; border: 2px solid currentColor; border-radius: 50%; color: inherit; opacity: 0.75; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: opacity 0.15s ease, transform 0.15s ease; } /* ⚠ The theme's style.css carries `button:focus, .btn:focus, .btn:hover { background: #402E00 }` at (0,1,1), which beats a single class — clicking an arrow filled it brand brown and the fill stuck, because it is :focus, not :active. These three pseudo-class selectors are (0,2,0), so they win. Full-white border and chevron on hover is the whole intended affordance; no fill at any point. */ .aw-v2-carousel__arrow:hover, .aw-v2-carousel__arrow:focus, .aw-v2-carousel__arrow:active { background: none; color: inherit; box-shadow: none; } .aw-v2-carousel__arrow:hover, .aw-v2-carousel__arrow:focus-visible { opacity: 1; } .aw-v2-carousel__arrow:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; } .aw-v2-carousel__arrow:active { transform: scale(0.94); } /* Chevron drawn as a rotated border, so there is no icon file to fetch. */ .aw-v2-carousel__arrow > span { display: block; width: 9px; height: 9px; border: solid currentColor; border-width: 2px 2px 0 0; } /* Centring a chevron built from two borders of a square is not the same as centring its box. The stroke is an L along the top and right edges, so its mass sits toward that corner — about 2.2px off the box centre once rotated 45 degrees, always toward the tip. Rotation itself keeps the BOX centred, which is why measuring getBoundingClientRect() cannot see the error; it was found by taking the pixel centroid of the painted chevron. So each one is pulled back toward the circle's middle by that amount. translateX is listed first so it applies AFTER the rotation, in the parent's axes rather than the rotated ones. */ .aw-v2-carousel__arrow--prev > span { transform: translateX(2.2px) rotate(-135deg); } .aw-v2-carousel__arrow--next > span { transform: translateX(-2.2px) rotate(45deg); } .aw-v2-carousel__dots { display: flex; align-items: center; gap: 10px; } .aw-v2-carousel__dot { appearance: none; padding: 0; border: 0; /* Visually 10px, but padded out to a real target via a pseudo-element below. */ width: 10px; height: 10px; border-radius: 50%; /* Explicit white, not currentColor: these are