/* ============================================================ Design tokens — scales TYPO-10 / SPACE-01 / CONT-04 / BP-05 / GEO-06 ============================================================ */ :root { /* palette (post-shift values) */ --chroma-main: #fb8c00; --chroma-key: #753e16; --chroma-key-active: #5e3411; --chroma-page: #121314; --chroma-raised: #1c1e20; --chroma-glyph: #ffffff; --chroma-quiet: #c2c1c1; --chroma-border: #2c2f32; --chroma-border-strong: #43474b; --chroma-gradient-light: #dc7636; --chroma-gradient-mid: #a8571c; --chroma-advisory: #b91c1c; /* rhythm — modular 4px base */ --rhythm-2xs: 4px; --rhythm-xs: 8px; --rhythm-sm: 12px; --rhythm-md: 16px; --rhythm-lg: 24px; --rhythm-xl: 40px; --rhythm-2xl: 64px; --rhythm-3xl: 96px; /* geometry — mixed asymmetric */ --curve-2xs: 0; --curve-xs: 0; --curve-sm: 4px; --curve-md: 12px; --curve-lg: 24px; --curve-xl: 24px; --curve-2xl: 24px; --curve-3xl: 24px; --curve-capsule: 9999px; --curve-round-full: 9999px; --stroke-fine: 1px; --stroke-base: 2px; --stroke-wide: 4px; --depth-2xs: 0 1px 0 rgba(0, 0, 0, 0.1); --depth-xs: 0 1px 0 rgba(0, 0, 0, 0.1); --depth-sm: 0 2px 8px rgba(0, 0, 0, 0.07); --depth-md: 0 6px 16px rgba(0, 0, 0, 0.1); --depth-lg: 0 12px 32px rgba(0, 0, 0, 0.14); --depth-xl: 0 12px 32px rgba(0, 0, 0, 0.14); --depth-2xl: 0 12px 32px rgba(0, 0, 0, 0.14); --depth-3xl: 0 12px 32px rgba(0, 0, 0, 0.14); /* type */ --family-title: "Exo", "Trebuchet MS", sans-serif; --family-copy: "Inter", "Helvetica Neue", Arial, sans-serif; --text-size-display-1: clamp(30px, 5vw, 60px); --text-size-h2: clamp(24px, 3vw, 34px); --text-size-lg-2: clamp(20px, 2vw, 24px); --text-size-md-2: 19px; --text-size-h5: 16px; --text-size-h6: 14px; --text-size-normal: 16px; --text-size-petite: 13px; --text-size-tiny: 10px; --leading-snug: 1.1; --leading-even: 1.5; --leading-relaxed: 1.65; --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-open: 0.06em; --weight-regular: 400; --weight-half: 600; --weight-strong: 800; /* containers — asymmetric offset (CONT-04) */ --bounds-main: 1360px; --bounds-text: 1360px; --bounds-pad-lg: 56px; --bounds-pad-md: 24px; --bounds-edge-narrow: 16px; /* header */ --bar-tall: 72px; --bar-h-sm: 62px; /* motion — quiet temper, own numbers */ --duration-short: 137ms; --duration-mid: 270ms; --duration-slow: 517ms; --glide-release: cubic-bezier(0.2, 0.78, 0.42, 0.99); --glide-launch: cubic-bezier(0.51, 0.04, 0.48, 0.91); --glide-smooth: cubic-bezier(0.51, 0.04, 0.48, 0.91); --glide-elastic: cubic-bezier(0.34, 1.65, 0.51, 1.15); /* build-local helpers (prefixed, not part of the token dictionary) */ --hgo-narrow: 650px; --hgo-pad-end: 24px; --hgo-sec-y: 44px; --hgo-shell: calc(var(--bounds-main) + var(--bounds-pad-lg) + var(--hgo-pad-end)); } /* ============================================================ Self-hosted webfonts — no third-party stylesheet in ============================================================ */ @font-face { font-family: "Exo"; font-style: normal; font-weight: 600; font-display: swap; src: url("/art/exo-latin-600-normal.woff2") format("woff2"); } @font-face { font-family: "Exo"; font-style: normal; font-weight: 700 800; font-display: swap; src: url("/art/exo-latin-800-normal.woff2") format("woff2"); } @font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("/art/inter-latin-400-normal.woff2") format("woff2"); } @font-face { font-family: "Inter"; font-style: normal; font-weight: 500 600; font-display: swap; src: url("/art/inter-latin-600-normal.woff2") format("woff2"); } /* ============================================================ Reset and base typography ============================================================ */ *, *::before, *::after { box-sizing: border-box; } html, body { overflow-x: clip; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background-color: var(--chroma-page); color: var(--chroma-glyph); font-family: var(--family-copy); font-size: var(--text-size-normal); font-weight: var(--weight-regular); line-height: var(--leading-even); } h1, h2, h3, h4, h5, h6 { overflow-wrap: anywhere; margin: 0; } h1 { font-family: var(--family-title); font-weight: var(--weight-strong); font-size: var(--text-size-display-1); line-height: var(--leading-snug); letter-spacing: var(--tracking-tight); text-transform: uppercase; } h2 { font-family: var(--family-title); font-weight: var(--weight-half); font-size: var(--text-size-h2); line-height: var(--leading-snug); letter-spacing: var(--tracking-normal); } h3 { font-family: var(--family-copy); font-weight: var(--weight-half); font-size: var(--text-size-lg-2); line-height: var(--leading-even); } h4 { font-family: var(--family-copy); font-weight: var(--weight-half); font-size: var(--text-size-md-2); line-height: var(--leading-even); } img { max-width: 100%; } table { border-collapse: collapse; } .main { display: block; flex: 1 0 auto; animation: hgo-enter var(--duration-slow) var(--glide-release) both; } @keyframes hgo-enter { from { opacity: 0; } to { opacity: 1; } } /* ============================================================ Accessibility helpers ============================================================ */ .skip-hop { position: absolute; inset-inline-start: var(--rhythm-md); z-index: 200; padding: var(--rhythm-xs) var(--rhythm-md); background-color: var(--chroma-main); color: var(--chroma-page); font-weight: var(--weight-half); border-radius: var(--curve-sm); } .skip-hop:not(:focus) { top: -200px !important; } .skip-hop:focus { top: var(--rhythm-xs); } .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; } /* ============================================================ RG-05 — «18+» sign next to a neutral strip ============================================================ */ .frieze { display: block; background-color: var(--chroma-raised); border-block-end: var(--stroke-fine) solid var(--chroma-border); padding-block: var(--rhythm-xs); text-align: center; } .frieze-band { display: block; max-width: var(--hgo-shell); margin-inline: auto; padding-inline: var(--bounds-pad-lg) var(--hgo-pad-end); } .frieze-flag { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; min-height: 24px; margin-inline-end: var(--rhythm-xs); padding: 2px 8px; border-radius: var(--curve-sm); background-color: var(--chroma-advisory); color: var(--chroma-glyph); font-family: var(--family-title); font-size: var(--text-size-h6); font-weight: var(--weight-strong); vertical-align: middle; } .frieze-text { background-color: var(--chroma-raised); color: var(--chroma-quiet); font-size: var(--text-size-petite); vertical-align: middle; } .frieze-hop { background-color: var(--chroma-raised); color: var(--chroma-main); text-decoration: underline; } .frieze-hop:hover { background-color: var(--chroma-raised); color: var(--chroma-gradient-light); } /* ============================================================ HEAD-MIRROR — nav on the left, logo on the right; behavior static ============================================================ */ .transom { position: static; background-color: var(--chroma-page); border-block-end: var(--stroke-fine) solid var(--chroma-border); box-shadow: var(--depth-xs); } .transom-strip { position: relative; display: flex; align-items: center; gap: var(--rhythm-sm); height: 72px; min-height: 72px; max-width: var(--hgo-shell); margin-inline: auto; padding-inline: var(--bounds-pad-lg) var(--hgo-pad-end); } .transom-menu-handle { display: none; align-items: center; gap: var(--rhythm-xs); min-height: 44px; padding: var(--rhythm-xs) var(--rhythm-sm); border: 0; border-radius: var(--curve-sm); background-color: var(--chroma-raised); color: var(--chroma-glyph); font-family: var(--family-title); font-size: var(--text-size-h6); font-weight: var(--weight-half); text-transform: uppercase; letter-spacing: var(--tracking-open); cursor: pointer; } .transom-lines { position: relative; display: block; width: 18px; height: 2px; background-color: var(--chroma-glyph); transition: background-color var(--duration-short) var(--glide-release); } .transom-lines::before, .transom-lines::after { content: ""; position: absolute; inset-inline-start: 0; width: 18px; height: 2px; background-color: var(--chroma-glyph); transition: transform var(--duration-short) var(--glide-release); } .transom-lines::before { top: -6px; } .transom-lines::after { top: 6px; } .transom-menu-handle[aria-expanded="true"] .transom-lines { background-color: transparent; } .transom-menu-handle[aria-expanded="true"] .transom-lines::before { transform: translateY(6px) rotate(45deg); } .transom-menu-handle[aria-expanded="true"] .transom-lines::after { transform: translateY(-6px) rotate(-45deg); } .transom-word { display: inline-block; } .transom-index { flex: 0 0 auto; min-width: auto; } .transom-run { display: flex; align-items: center; gap: var(--rhythm-xs); margin: 0; padding: 0; list-style: none; } .transom-cell { display: flex; align-items: center; position: relative; } .transom-cell[hidden] { display: none; } .transom-cell + .transom-cell::before { content: "|"; margin-inline-end: var(--rhythm-xs); color: var(--chroma-border-strong); background-color: var(--chroma-page); font-size: var(--text-size-petite); } .transom-hop { display: inline-flex; align-items: center; min-height: 44px; padding-inline: var(--rhythm-xs); border-radius: var(--curve-capsule); background-color: var(--chroma-page); color: var(--chroma-quiet); font-size: 14px; font-weight: 400; letter-spacing: var(--tracking-open); text-transform: uppercase; text-decoration: none; white-space: nowrap; transition: transform var(--duration-short) var(--glide-release), color var(--duration-short) var(--glide-release); } .transom-hop:hover { background-color: var(--chroma-page); color: var(--chroma-glyph); transform: translateY(-2px); } body[data-current="/"] .transom-hop[href="/"], body[data-current="/deals/"] .transom-hop[href="/deals/"], body[data-current="/signin/"] .transom-hop[href="/signin/"], body[data-current="/freespins/"] .transom-hop[href="/freespins/"], body[data-current="/promo-code/"] .transom-hop[href="/promo-code/"], body[data-current="/app/"] .transom-hop[href="/app/"], body[data-current="/slot-list-slots/"] .transom-hop[href="/slot-list-slots/"], body[data-current="/team/"] .transom-hop[href="/team/"], body[data-current="/hjaelp/"] .transom-hop[href="/hjaelp/"] { background-color: var(--chroma-key); color: var(--chroma-glyph); } .transom-cell-more { position: relative; } .transom-more-opener { display: inline-flex; align-items: center; min-height: 44px; padding-inline: var(--rhythm-xs); border: 0; border-radius: var(--curve-capsule); background-color: var(--chroma-page); color: var(--chroma-quiet); font-family: var(--family-copy); font-size: 14px; font-weight: 400; letter-spacing: var(--tracking-open); text-transform: uppercase; white-space: nowrap; cursor: pointer; } .transom-more-opener:hover { background-color: var(--chroma-page); color: var(--chroma-glyph); } .transom-more-pane { display: none; position: absolute; inset-block-start: calc(100% + var(--rhythm-2xs)); inset-inline-start: 0; z-index: 95; min-width: 220px; max-height: 60vh; overflow-y: auto; margin: 0; padding: var(--rhythm-2xs); list-style: none; border: var(--stroke-fine) solid var(--chroma-border-strong); border-radius: var(--curve-sm); background-color: var(--chroma-raised); box-shadow: var(--depth-md); } .transom-more-pane.is-open { display: block; } .transom-more-pane .transom-cell { display: block; } .transom-more-pane .transom-cell::before { content: none; } .transom-more-pane .transom-hop { display: block; background-color: var(--chroma-raised); white-space: normal; padding: var(--rhythm-xs) var(--rhythm-sm); } .transom-more-pane .transom-hop:hover { background-color: var(--chroma-key); color: var(--chroma-glyph); transform: none; } .transom-mark { display: inline-flex; align-items: center; margin-inline-start: auto; padding: var(--rhythm-2xs) var(--rhythm-xs); border: var(--stroke-fine) solid var(--chroma-border-strong); border-radius: var(--curve-sm); background-color: var(--chroma-raised); color: var(--chroma-quiet); font-size: var(--text-size-tiny); font-weight: var(--weight-half); letter-spacing: var(--tracking-open); } .transom-tools { display: flex; flex-shrink: 0; align-items: center; gap: var(--rhythm-xs); } .transom-tap { flex-shrink: 0; white-space: nowrap; } .transom-badge { display: inline-flex; flex-shrink: 0; align-items: center; padding: var(--rhythm-2xs) var(--rhythm-md); border-radius: var(--curve-round-full); background-color: var(--chroma-raised); } .transom-figure { display: block; flex-shrink: 0; width: auto; height: 60px; } .transom-drawer { display: none; position: absolute; inset-block-start: 100%; inset-inline: 0; z-index: 80; max-height: 70vh; overflow-y: auto; border-block-start: var(--stroke-fine) solid var(--chroma-border); background-color: var(--chroma-page); box-shadow: var(--depth-md); } .transom-drawer.is-open { display: block; } .transom-drawer-run { margin: 0; padding: 0; list-style: none; } .transom-drawer-cell { display: block; } .transom-drawer-hop { display: block; min-height: 44px; padding: var(--rhythm-sm) var(--bounds-edge-narrow); border-block-end: var(--stroke-fine) solid var(--chroma-border); background-color: var(--chroma-page); color: var(--chroma-quiet); font-size: var(--text-size-normal); text-decoration: none; } .transom-drawer-hop:hover { background-color: var(--chroma-raised); color: var(--chroma-glyph); } body[data-current="/"] .transom-drawer-hop[href="/"], body[data-current="/deals/"] .transom-drawer-hop[href="/deals/"], body[data-current="/signin/"] .transom-drawer-hop[href="/signin/"], body[data-current="/freespins/"] .transom-drawer-hop[href="/freespins/"], body[data-current="/promo-code/"] .transom-drawer-hop[href="/promo-code/"], body[data-current="/app/"] .transom-drawer-hop[href="/app/"], body[data-current="/slot-list-slots/"] .transom-drawer-hop[href="/slot-list-slots/"], body[data-current="/team/"] .transom-drawer-hop[href="/team/"], body[data-current="/hjaelp/"] .transom-drawer-hop[href="/hjaelp/"] { background-color: var(--chroma-key); color: var(--chroma-glyph); } /* header steps down as the row gets crowded */ @media (max-width: 1380px) { .transom-strip { padding-inline: var(--bounds-pad-md); gap: var(--rhythm-xs); } .transom-figure { height: 52px; } } @media (max-width: 900px) { .transom-menu-handle { display: inline-flex; } .transom-index { display: none; } .transom-figure { height: 46px; } } @media (max-width: 620px) { .transom-strip { height: auto; min-height: var(--bar-h-sm); flex-wrap: wrap; padding-block: var(--rhythm-xs); padding-inline: var(--bounds-edge-narrow); } .transom-badge { padding-inline: var(--rhythm-xs); } .transom-figure { height: 40px; } .transom-tools { order: 4; flex-basis: 100%; } .transom-tap { width: 100%; text-align: center; justify-content: center; } } @media (max-width: 360px) { .transom-word { display: none; } } /* ============================================================ HERO-07 — top tile, text below (home only) ============================================================ */ .mantle { background-color: var(--chroma-page); } .mantle-frame { margin: 0; } .mantle-figure { display: block; width: 100%; height: 400px; object-fit: cover; } .mantle-body { max-width: var(--hgo-shell); margin-inline: auto; padding-inline: var(--bounds-pad-lg) var(--hgo-pad-end); padding-block: var(--hgo-sec-y); } .mantle-lede { color: var(--chroma-glyph); background-color: var(--chroma-page); } .mantle-tagline { max-width: var(--hgo-narrow); margin-block: var(--rhythm-md) 0; background-color: var(--chroma-page); color: var(--chroma-quiet); font-size: var(--text-size-h5); line-height: var(--leading-relaxed); } .mantle-tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--rhythm-md); margin-block-start: var(--rhythm-lg); } .mantle-quiet { display: inline-flex; align-items: center; min-height: 44px; padding-inline: var(--rhythm-lg); border: var(--stroke-base) solid var(--chroma-border-strong); border-radius: var(--curve-xs); background-color: var(--chroma-raised); color: var(--chroma-glyph); font-family: var(--family-title); font-size: var(--text-size-h6); font-weight: var(--weight-strong); letter-spacing: var(--tracking-open); text-transform: uppercase; text-decoration: none; transition: background-color var(--duration-short) var(--glide-release), color var(--duration-short) var(--glide-release); } .mantle-quiet:hover { background-color: var(--chroma-key); color: var(--chroma-glyph); } .mantle-fine { display: block; margin-block-start: var(--rhythm-sm); background-color: var(--chroma-page); color: var(--chroma-quiet); font-size: var(--text-size-petite); } @media (max-width: 720px) { .mantle-figure { height: 220px; } } /* ============================================================ PHEAD-05 — crumb trail + title (secondary pages) ============================================================ */ .bay { background-color: var(--chroma-page); } .bay-body { max-width: var(--hgo-shell); margin-inline: auto; padding-inline: var(--bounds-pad-lg) var(--hgo-pad-end); padding-block: var(--hgo-sec-y); } .bay-lede { color: var(--chroma-glyph); background-color: var(--chroma-page); } .bay-text { margin-block: var(--rhythm-md) 0; background-color: var(--chroma-page); color: var(--chroma-quiet); font-size: var(--text-size-h5); line-height: var(--leading-relaxed); } /* BREAD-02 — pill chips */ .rotunda { display: block; } .rotunda-run { display: flex; flex-wrap: wrap; gap: var(--rhythm-xs); margin: 0 0 var(--rhythm-md); padding: 0; list-style: none; } .rotunda-cell { display: inline-flex; } .rotunda-hop { display: inline-flex; align-items: center; padding: var(--rhythm-2xs) var(--rhythm-sm); border-radius: var(--curve-capsule); background-color: var(--chroma-raised); color: var(--chroma-quiet); font-size: var(--text-size-tiny); letter-spacing: var(--tracking-open); text-decoration: none; text-transform: uppercase; } .rotunda-hop:hover { background-color: var(--chroma-main); color: var(--chroma-page); } .rotunda-here { display: inline-flex; align-items: center; padding: var(--rhythm-2xs) var(--rhythm-sm); border-radius: var(--curve-capsule); background-color: #3a2712; color: var(--chroma-glyph); font-size: var(--text-size-tiny); letter-spacing: var(--tracking-open); text-transform: uppercase; } /* ============================================================ PROSE-23 — first paragraph of a section reads as a pull-in knobs: accentSide left · fill solid · lineWeight thin · density tight ============================================================ */ .deck { background-color: var(--chroma-page); } .deck-body { max-width: var(--hgo-shell); margin-inline: auto; padding-inline: var(--bounds-pad-lg) var(--hgo-pad-end); padding-block: var(--hgo-sec-y); } .deck-part { display: block; margin-block-start: var(--rhythm-xl); } .deck-part:first-child { margin-block-start: 0; } .deck-hdr { margin-block-end: var(--rhythm-sm); background-color: var(--chroma-page); color: var(--chroma-glyph); } .deck-open { margin-block: 0 var(--rhythm-sm); padding: var(--rhythm-sm) var(--rhythm-md); border-left: 2px solid var(--chroma-main); background-color: var(--chroma-raised); color: var(--chroma-glyph); font-size: var(--text-size-md-2); line-height: var(--leading-even); } .deck-text { margin-block: var(--rhythm-sm) 0; background-color: var(--chroma-page); color: var(--chroma-quiet); line-height: var(--leading-relaxed); } .deck-run { margin-block: var(--rhythm-sm); padding-inline-start: var(--rhythm-lg); } .deck-cell { margin-block-end: var(--rhythm-2xs); background-color: var(--chroma-page); color: var(--chroma-quiet); line-height: var(--leading-relaxed); } .deck-cell::marker { color: var(--chroma-main); } .deck-hop { background-color: var(--chroma-page); color: var(--chroma-main); text-decoration: underline; } .deck-hop:hover { background-color: var(--chroma-page); color: var(--chroma-gradient-light); } .deck-invite { display: flex; flex-wrap: wrap; align-items: center; gap: var(--rhythm-sm); margin-block: var(--rhythm-lg); } .deck-fine { background-color: var(--chroma-page); color: var(--chroma-quiet); font-size: var(--text-size-petite); } .deck-shots { background-color: var(--chroma-page); } .deck-shots-stack { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: var(--rhythm-lg); } .deck-shot { display: block; width: 100%; height: 420px; object-fit: cover; border-radius: var(--curve-md); } .deck-shot-tall { height: 420px; object-fit: contain; background-color: var(--chroma-raised); } @media (max-width: 720px) { .deck-shot, .deck-shot-tall { height: 240px; } } /* INLINE-CTA-03 — inline text hook, no button */ .strip { display: block; padding-block: var(--rhythm-md); text-align: center; } .strip-line { margin: 0; background-color: var(--chroma-page); color: var(--chroma-quiet); font-size: var(--text-size-h6); line-height: var(--leading-even); } .strip-line strong { background-color: var(--chroma-page); color: var(--chroma-glyph); font-weight: var(--weight-strong); } .strip-hop { background-color: var(--chroma-page); color: var(--chroma-main); text-decoration: underline; } .strip-hop:hover { background-color: var(--chroma-page); color: var(--chroma-gradient-light); text-decoration-thickness: 2px; } /* ============================================================ GRID-05 — wide featured card + compact two-column list ============================================================ */ .mullion { background-color: var(--chroma-page); } .mullion-body { max-width: var(--hgo-shell); margin-inline: auto; padding-inline: var(--bounds-pad-lg) var(--hgo-pad-end); padding-block: var(--hgo-sec-y); } .mullion-hdr { margin-block-end: var(--rhythm-lg); background-color: var(--chroma-page); color: var(--chroma-glyph); } .mullion-star { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--rhythm-2xl); align-items: center; margin-block-end: var(--rhythm-xl); padding: var(--rhythm-2xl); border-radius: var(--curve-lg); background-color: var(--chroma-main); color: var(--chroma-page); } .mullion-star-hdr { grid-column: 1; grid-row: 1; margin-block-end: var(--rhythm-sm); background-color: var(--chroma-main); color: var(--chroma-page); font-family: var(--family-title); font-size: var(--text-size-h2); font-weight: var(--weight-strong); line-height: var(--leading-snug); } .mullion-star-text { grid-column: 1; grid-row: 2; background-color: var(--chroma-main); color: var(--chroma-page); font-size: var(--text-size-h5); line-height: var(--leading-even); } .mullion-star-tap { grid-column: 2; grid-row: 1 / span 2; justify-self: end; } .mullion-stack { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--rhythm-lg); align-items: start; } .mullion-panel { padding: var(--rhythm-md); border-block-start: var(--stroke-base) solid var(--chroma-main); background-color: var(--chroma-page); transition: box-shadow var(--duration-mid) var(--glide-release); } .mullion-panel:hover { box-shadow: var(--depth-md); } .mullion-sign { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; margin-block-end: var(--rhythm-xs); border: var(--stroke-fine) solid var(--chroma-border-strong); border-radius: var(--curve-round-full); background-color: #2b1610; color: var(--chroma-main); } .mullion-sign svg { width: 21px; height: 21px; fill: currentColor; } .mullion-panel-hdr { margin-block-end: var(--rhythm-2xs); background-color: var(--chroma-page); color: var(--chroma-glyph); font-size: var(--text-size-normal); font-weight: var(--weight-strong); } .mullion-panel-text { background-color: var(--chroma-page); color: var(--chroma-quiet); font-size: var(--text-size-petite); line-height: var(--leading-even); } @media (max-width: 900px) { .mullion-star { grid-template-columns: minmax(0, 1fr); row-gap: var(--rhythm-lg); } .mullion-star-tap { grid-column: 1; grid-row: 3; justify-self: start; } } @media (max-width: 720px) { .mullion-stack { grid-template-columns: minmax(0, 1fr); } .mullion-star { padding: var(--rhythm-lg); } } /* ============================================================ REV-04 — featured quote + compact list ============================================================ */ .sigil { background-color: var(--chroma-page); } .sigil-body { max-width: var(--hgo-shell); margin-inline: auto; padding-inline: var(--bounds-pad-lg) var(--hgo-pad-end); padding-block: var(--hgo-sec-y); } .sigil-hdr { margin-block-end: var(--rhythm-lg); background-color: var(--chroma-page); color: var(--chroma-glyph); } .sigil-star { margin: 0 0 var(--rhythm-2xl); padding: var(--rhythm-2xl); border-radius: var(--curve-lg); background-color: #1e1a17; color: var(--chroma-glyph); } .sigil-star-stars { display: block; margin-block-end: var(--rhythm-sm); background-color: #1e1a17; color: var(--chroma-main); font-size: 28px; line-height: var(--leading-snug); } .sigil-star-text { margin: 0; background-color: #1e1a17; color: var(--chroma-glyph); font-size: var(--text-size-md-2); font-style: italic; line-height: var(--leading-even); } .sigil-cite { display: block; margin-block-start: var(--rhythm-sm); background-color: #1e1a17; color: var(--chroma-quiet); font-size: var(--text-size-petite); font-style: normal; } .sigil-stack { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--rhythm-lg); align-items: start; } .sigil-panel { padding: var(--rhythm-md); border-block-start: var(--stroke-fine) solid var(--chroma-border); background-color: var(--chroma-page); } .sigil-panel-top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--rhythm-xs); margin-block-end: var(--rhythm-xs); } .sigil-panel-name { background-color: var(--chroma-page); color: var(--chroma-glyph); font-weight: var(--weight-half); font-size: var(--text-size-h6); } .sigil-panel-stars { background-color: var(--chroma-page); color: var(--chroma-main); font-size: var(--text-size-h6); } .sigil-panel-text { background-color: var(--chroma-page); color: var(--chroma-quiet); font-size: var(--text-size-petite); line-height: var(--leading-even); } .sigil-when { display: block; margin-block-start: var(--rhythm-xs); background-color: var(--chroma-page); color: var(--chroma-quiet); font-size: var(--text-size-tiny); letter-spacing: var(--tracking-open); text-transform: uppercase; } .sigil-star .sigil-when { display: inline; background-color: #1e1a17; } @media (max-width: 720px) { .sigil-stack { grid-template-columns: minmax(0, 1fr); } .sigil-star { padding: var(--rhythm-lg); } } /* ============================================================ FAQ-07 — compact mini FAQ ============================================================ */ .filigree { background-color: var(--chroma-page); } .filigree-body { max-width: var(--hgo-shell); margin-inline: auto; padding-inline: var(--bounds-pad-lg) var(--hgo-pad-end); padding-block: var(--hgo-sec-y); } .filigree-hdr { margin-block-end: var(--rhythm-md); background-color: var(--chroma-page); color: var(--chroma-glyph); } .filigree-cell { border-block-end: var(--stroke-fine) solid rgba(255, 255, 255, 0.08); } .filigree-ask { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--rhythm-sm); min-height: 44px; padding-block: var(--rhythm-xs); background-color: var(--chroma-page); color: var(--chroma-glyph); cursor: pointer; list-style: none; } .filigree-ask::-webkit-details-marker { display: none; } .filigree-ask::after { content: "+"; color: var(--chroma-main); background-color: var(--chroma-page); font-size: var(--text-size-lg-2); line-height: 1; transition: transform var(--duration-short) var(--glide-release); } .filigree-cell[open] .filigree-ask::after { transform: rotate(45deg); } .filigree-ask-hdr { margin: 0; background-color: var(--chroma-page); color: var(--chroma-glyph); font-family: var(--family-copy); font-size: var(--text-size-normal); font-weight: var(--weight-half); letter-spacing: var(--tracking-normal); } .filigree-stuff { display: grid; grid-template-rows: 1fr; transition: grid-template-rows var(--duration-mid) var(--glide-smooth); } .filigree-text { min-height: 0; overflow: hidden; padding-block: 0 var(--rhythm-sm); background-color: var(--chroma-page); color: var(--chroma-quiet); font-size: var(--text-size-petite); line-height: var(--leading-relaxed); } /* ============================================================ TABLE-04 — highlighted first column ============================================================ */ .rafter { background-color: var(--chroma-page); } .rafter-body { max-width: var(--hgo-shell); margin-inline: auto; padding-inline: var(--bounds-pad-lg) var(--hgo-pad-end); padding-block: var(--hgo-sec-y); } .rafter-hdr { margin-block-end: var(--rhythm-md); background-color: var(--chroma-page); color: var(--chroma-glyph); } .rafter-scroll { overflow-x: auto; } .rafter-grid { width: 100%; border-collapse: collapse; } .rafter-grid th[scope="col"] { padding: var(--rhythm-sm) var(--rhythm-md); background-color: var(--chroma-main); color: var(--chroma-page); font-family: var(--family-title); font-size: var(--text-size-petite); font-weight: var(--weight-strong); letter-spacing: var(--tracking-open); text-align: start; text-transform: uppercase; white-space: nowrap; } .rafter-grid th[scope="row"] { width: 26%; padding: var(--rhythm-sm) var(--rhythm-md); border-inline-end: var(--stroke-wide) solid var(--chroma-main); background-color: var(--chroma-key); color: var(--chroma-glyph); font-weight: var(--weight-strong); text-align: start; } .rafter-grid td { padding: var(--rhythm-sm) var(--rhythm-md); border-block-end: var(--stroke-fine) solid var(--chroma-border); background-color: var(--chroma-page); color: var(--chroma-quiet); font-size: var(--text-size-petite); } @media (max-width: 640px) { .rafter-grid th[scope="col"] { white-space: normal; padding: var(--rhythm-xs); font-size: var(--text-size-tiny); } .rafter-grid th[scope="row"], .rafter-grid td { padding: var(--rhythm-xs); font-size: var(--text-size-tiny); } } /* ============================================================ CTA-07 — vertical card with a decorative number ============================================================ */ .lattice { background-color: var(--chroma-page); } .lattice-body { max-width: var(--hgo-shell); margin-inline: auto; padding-inline: var(--bounds-pad-lg) var(--hgo-pad-end); padding-block: var(--hgo-sec-y); } .lattice-panel { padding: var(--rhythm-2xl); border: var(--stroke-base) solid var(--chroma-main); border-radius: var(--curve-lg); background-color: var(--chroma-raised); text-align: center; } .lattice-numeral { display: block; background-color: var(--chroma-raised); color: var(--chroma-main); font-family: var(--family-title); font-size: var(--text-size-h2); font-weight: var(--weight-strong); line-height: var(--leading-snug); } .lattice-hdr { margin-block: var(--rhythm-sm); background-color: var(--chroma-raised); color: var(--chroma-glyph); } .lattice-text { max-width: var(--hgo-narrow); margin: 0 auto var(--rhythm-lg); background-color: var(--chroma-raised); color: var(--chroma-quiet); line-height: var(--leading-relaxed); } .lattice-fine { margin-block-start: var(--rhythm-sm); background-color: var(--chroma-raised); color: var(--chroma-quiet); font-size: var(--text-size-petite); } @media (max-width: 720px) { .lattice-panel { padding: var(--rhythm-lg); } } /* ============================================================ LEGAL-05 — definition list style ============================================================ */ .desk { background-color: var(--chroma-page); } .desk-body { max-width: var(--hgo-shell); margin-inline: auto; padding-inline: var(--bounds-pad-lg) var(--hgo-pad-end); padding-block: var(--hgo-sec-y); } .desk-open { margin: 0; background-color: var(--chroma-page); color: var(--chroma-glyph); font-size: var(--text-size-md-2); line-height: var(--leading-relaxed); } .desk-stamp { margin-block: var(--rhythm-sm) 0; background-color: var(--chroma-page); color: var(--chroma-quiet); font-size: var(--text-size-petite); } .desk-when { background-color: var(--chroma-page); color: var(--chroma-quiet); } .desk-run { margin-block: var(--rhythm-xl) 0; } .desk-term { position: relative; margin-block: var(--rhythm-lg) var(--rhythm-xs); padding-block-start: var(--rhythm-sm); background-color: var(--chroma-page); color: var(--chroma-glyph); font-family: var(--family-title); font-size: var(--text-size-md-2); font-weight: var(--weight-strong); } .desk-term::before { content: ""; position: absolute; inset-block-start: 0; inset-inline-start: 0; width: 30px; height: 2px; background-color: var(--chroma-main); } .desk-def { margin-inline-start: 0; margin-block-end: var(--rhythm-md); background-color: var(--chroma-page); color: var(--chroma-quiet); line-height: var(--leading-relaxed); } .desk-line { display: block; margin-block-end: var(--rhythm-sm); } .desk-aid { margin-block: var(--rhythm-lg); padding-inline-start: var(--rhythm-lg); } .desk-cell { margin-block-end: var(--rhythm-xs); background-color: var(--chroma-page); color: var(--chroma-quiet); line-height: var(--leading-relaxed); } .desk-warn { padding: var(--rhythm-md); border-inline-start: var(--stroke-wide) solid var(--chroma-advisory); background-color: var(--chroma-raised); color: var(--chroma-glyph); font-size: var(--text-size-petite); line-height: var(--leading-relaxed); } /* ============================================================ FORM-01 — stacked standard contact form ============================================================ */ .hallway { background-color: var(--chroma-page); } .hallway-body { max-width: var(--hgo-shell); margin-inline: auto; padding-inline: var(--bounds-pad-lg) var(--hgo-pad-end); padding-block: var(--hgo-sec-y); } .hallway-open { margin: 0 0 var(--rhythm-lg); background-color: var(--chroma-page); color: var(--chroma-quiet); line-height: var(--leading-relaxed); } .hallway-done { display: none; margin-block-end: var(--rhythm-md); padding: var(--rhythm-md); border: var(--stroke-fine) solid #2f7d4f; border-radius: var(--curve-sm); background-color: #14301f; color: var(--chroma-glyph); } .hallway-done.is-open { display: block; } .hallway-form { display: flex; flex-direction: column; gap: var(--rhythm-md); padding: var(--rhythm-lg); border-radius: var(--curve-md); background-color: var(--chroma-raised); box-shadow: var(--depth-sm); } .hallway-box { display: flex; flex: 0 0 auto; flex-direction: column; gap: var(--rhythm-xs); } .hallway-mark { background-color: var(--chroma-raised); color: var(--chroma-glyph); font-size: var(--text-size-petite); font-weight: var(--weight-half); letter-spacing: var(--tracking-open); text-transform: uppercase; } .hallway-entry, .hallway-area { padding: var(--rhythm-sm) var(--rhythm-md); border: var(--stroke-fine) solid var(--chroma-border-strong); border-radius: var(--curve-xs); background-color: var(--chroma-page); color: var(--chroma-glyph); font-family: var(--family-copy); font-size: var(--text-size-normal); } .hallway-entry { height: 48px; } .hallway-area { min-height: 120px; resize: vertical; } .hallway-entry:focus, .hallway-area:focus { border-color: var(--chroma-main); outline: none; } .hallway-send { align-self: flex-start; min-height: 48px; padding-inline: var(--rhythm-xl); border: 0; border-radius: var(--curve-capsule); background-color: var(--chroma-main); color: var(--chroma-page); font-family: var(--family-title); font-size: var(--text-size-h6); font-weight: var(--weight-strong); letter-spacing: var(--tracking-open); text-transform: uppercase; cursor: pointer; transition: background-color var(--duration-short) var(--glide-release); } .hallway-send:hover { background-color: var(--chroma-gradient-light); color: var(--chroma-page); } /* ============================================================ AUTH-06 — full-hero author card (/team/) ============================================================ */ .gallery { background-color: var(--chroma-page); background-image: linear-gradient(135deg, #4a2a12, var(--chroma-page)); } .gallery-body { display: grid; grid-template-columns: 256px minmax(0, 1fr); gap: var(--rhythm-2xl); align-items: start; max-width: var(--hgo-shell); margin-inline: auto; padding-inline: var(--bounds-pad-lg) var(--hgo-pad-end); padding-block: var(--hgo-sec-y); } .gallery-shot { width: 256px; height: 256px; object-fit: cover; object-position: center 20%; border-radius: var(--curve-lg); box-shadow: var(--depth-lg); } .gallery-stuff { display: block; } .gallery-brow { display: block; margin-block-end: var(--rhythm-xs); color: var(--chroma-main); font-size: var(--text-size-petite); letter-spacing: var(--tracking-open); text-transform: uppercase; } .gallery-lede { color: var(--chroma-glyph); } .gallery-text { max-width: 540px; margin-block: var(--rhythm-md) 0; color: var(--chroma-glyph); font-size: var(--text-size-h5); line-height: var(--leading-relaxed); } .gallery-run { display: flex; flex-wrap: wrap; gap: var(--rhythm-xs); margin-block: var(--rhythm-lg) 0; padding: 0; list-style: none; } .gallery-cell { padding: var(--rhythm-2xs) var(--rhythm-sm); border: var(--stroke-fine) solid var(--chroma-border-strong); border-radius: var(--curve-capsule); background-color: var(--chroma-raised); color: var(--chroma-quiet); font-size: var(--text-size-petite); } .gallery-more { background-color: var(--chroma-page); } .gallery-more-hdr { margin-block-end: var(--rhythm-lg); background-color: var(--chroma-page); color: var(--chroma-glyph); } .gallery-more-stack { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--rhythm-lg); align-items: start; } .gallery-more-panel { padding: var(--rhythm-md); border-block-start: var(--stroke-base) solid var(--chroma-main); background-color: var(--chroma-page); transition: box-shadow var(--duration-mid) var(--glide-release); } .gallery-more-panel:hover { box-shadow: var(--depth-md); } .gallery-more-lede { margin-block-end: var(--rhythm-xs); background-color: var(--chroma-page); color: var(--chroma-glyph); font-size: var(--text-size-h5); font-weight: var(--weight-half); } .gallery-more-hop { position: relative; background-color: var(--chroma-page); color: var(--chroma-glyph); text-decoration: none; } .gallery-more-hop::after { content: ""; position: absolute; inset-inline: 0; inset-block-end: -2px; height: 1px; background-color: var(--chroma-main); transform: scaleX(0); transform-origin: center; transition: transform var(--duration-short) var(--glide-release); } .gallery-more-hop:hover { background-color: var(--chroma-page); color: var(--chroma-main); } .gallery-more-hop:hover::after { transform: scaleX(1); } .gallery-more-text { background-color: var(--chroma-page); color: var(--chroma-quiet); font-size: var(--text-size-petite); line-height: var(--leading-even); } @media (max-width: 900px) { .gallery-body { grid-template-columns: minmax(0, 1fr); gap: var(--rhythm-lg); } } @media (max-width: 720px) { .gallery-more-stack { grid-template-columns: minmax(0, 1fr); } } /* ============================================================ BYLINE-04 — quote-style editorial attribution ============================================================ */ .trellis { display: block; max-width: var(--hgo-shell); margin-inline: auto; padding-inline: var(--bounds-pad-lg) var(--hgo-pad-end); padding-block: var(--rhythm-xl); } .trellis-quote { position: relative; max-width: var(--hgo-narrow); margin: 0 auto; padding-block-start: var(--rhythm-xl); text-align: center; } .trellis-quote::before { content: "”"; position: absolute; inset-block-start: -18px; inset-inline: 0; background-color: var(--chroma-page); color: var(--chroma-main); font-family: var(--family-title); font-size: 60px; line-height: 1; } .trellis-text { margin: 0; background-color: var(--chroma-page); color: var(--chroma-glyph); font-family: var(--family-title); font-size: var(--text-size-md-2); font-style: italic; line-height: var(--leading-even); } .trellis-credit { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--rhythm-xs); margin-block-start: var(--rhythm-md); } .trellis-shot { width: 32px; height: 32px; object-fit: cover; object-position: center 20%; border: 3px solid var(--chroma-page); border-radius: var(--curve-round-full); background-color: var(--chroma-page); box-sizing: content-box; } .trellis-name { background-color: var(--chroma-page); font-style: normal; font-weight: var(--weight-strong); } .trellis-hop { background-color: var(--chroma-page); color: var(--chroma-main); text-decoration: none; } .trellis-hop:hover { background-color: var(--chroma-page); color: var(--chroma-gradient-light); text-decoration: underline; } .trellis-duty { background-color: var(--chroma-page); color: var(--chroma-quiet); font-size: var(--text-size-petite); font-style: italic; } /* ============================================================ ERR-03 — minimal, no drama ============================================================ */ .promenade { display: flex; flex: 1 0 auto; background-color: var(--chroma-page); } .promenade-body { display: flex; align-items: center; justify-content: center; width: 100%; max-width: var(--hgo-shell); margin-inline: auto; padding-inline: var(--bounds-pad-lg) var(--hgo-pad-end); padding-block: var(--hgo-sec-y); } .promenade-core { width: 100%; max-width: var(--hgo-narrow); margin-inline: auto; text-align: center; } .promenade-lede { background-color: var(--chroma-page); color: var(--chroma-glyph); font-size: var(--text-size-h2); text-transform: none; } .promenade-text { margin-block: var(--rhythm-md) var(--rhythm-lg); background-color: var(--chroma-page); color: var(--chroma-quiet); line-height: var(--leading-relaxed); } .promenade-tap { display: inline-flex; align-items: center; min-height: 44px; padding-inline: var(--rhythm-xl); border-radius: var(--curve-capsule); background-color: var(--chroma-main); color: var(--chroma-page); font-family: var(--family-title); font-size: var(--text-size-h6); font-weight: var(--weight-strong); letter-spacing: var(--tracking-open); text-decoration: none; text-transform: uppercase; transition: background-color var(--duration-short) var(--glide-release); } .promenade-tap:hover { background-color: var(--chroma-gradient-light); color: var(--chroma-page); } .main:has(> .promenade) { display: flex; flex-direction: column; } /* ============================================================ FOOT-06 — manifesto footer ============================================================ */ .barrow { background-color: var(--chroma-page); border-block-start: var(--stroke-fine) solid var(--chroma-border); } .barrow-frame { max-width: var(--hgo-shell); margin-inline: auto; padding-inline: var(--bounds-pad-lg) var(--hgo-pad-end); padding-block: var(--rhythm-2xl); } .barrow-manifest { text-align: center; } .barrow-lede { max-width: var(--hgo-narrow); margin: 0 auto; background-color: var(--chroma-page); color: var(--chroma-glyph); font-family: var(--family-title); font-weight: var(--weight-strong); } .barrow-return { display: inline-block; margin-block-start: var(--rhythm-md); background-color: var(--chroma-page); color: var(--chroma-glyph); font-family: var(--family-title); font-size: var(--text-size-h5); letter-spacing: var(--tracking-open); text-decoration: underline; text-transform: uppercase; } .barrow-return:hover { background-color: var(--chroma-page); color: var(--chroma-main); } .barrow-rule { height: 1px; margin-block: var(--rhythm-xl); background-color: var(--chroma-border); } .barrow-extra { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--rhythm-xl); } .barrow-badge { display: inline-flex; align-items: center; padding: var(--rhythm-2xs) var(--rhythm-sm); border-radius: var(--curve-round-full); background-color: var(--chroma-raised); } .barrow-figure { display: block; width: auto; height: 56px; } .barrow-index, .barrow-fine { display: block; } .barrow-hdr { display: block; margin-block-end: var(--rhythm-xs); background-color: var(--chroma-page); color: var(--chroma-quiet); font-size: var(--text-size-tiny); letter-spacing: var(--tracking-open); text-transform: uppercase; } .barrow-run { display: flex; flex-direction: column; gap: var(--rhythm-2xs); margin: 0; padding: 0; list-style: none; } .barrow-cell { display: block; } .barrow-hop { position: relative; display: inline-block; background-color: var(--chroma-page); color: var(--chroma-quiet); font-size: var(--text-size-h6); text-decoration: none; } .barrow-hop::after { content: ""; position: absolute; inset-inline: 0; inset-block-end: -2px; height: 1px; background-color: var(--chroma-main); transform: scaleX(0); transform-origin: center; transition: transform var(--duration-short) var(--glide-release); } .barrow-hop:hover { background-color: var(--chroma-page); color: var(--chroma-glyph); } .barrow-hop:hover::after { transform: scaleX(1); } .barrow-note { flex-basis: 100%; background-color: var(--chroma-page); color: var(--chroma-quiet); font-size: var(--text-size-tiny); letter-spacing: var(--tracking-open); text-transform: uppercase; } @media (max-width: 720px) { .barrow-extra { flex-direction: column; gap: var(--rhythm-lg); } } /* ============================================================ COOK-02 — full-width bottom strip, slide-up reveal ============================================================ */ .sconce { position: fixed; inset-block-end: 0; inset-inline: 0; z-index: 90; border-block-start: var(--stroke-fine) solid var(--chroma-border-strong); background-color: var(--chroma-main); opacity: 0; visibility: hidden; clip-path: inset(100% 0 0 0); transition: opacity var(--duration-mid) var(--glide-release), clip-path var(--duration-mid) var(--glide-release), transform var(--duration-mid) var(--glide-launch), visibility 0s linear var(--duration-mid); } .sconce.is-open { opacity: 1; visibility: visible; clip-path: inset(0 0 0 0); transition-delay: 0s; } .sconce.is-gone { opacity: 0; visibility: hidden; transform: translateY(140%); } .sconce-line { display: flex; align-items: center; justify-content: space-between; gap: var(--rhythm-md); max-width: var(--hgo-shell); margin-inline: auto; padding: var(--rhythm-md) var(--bounds-pad-lg); } .sconce-notice { flex: 1; margin: 0; background-color: var(--chroma-main); color: var(--chroma-page); font-size: var(--text-size-petite); line-height: var(--leading-even); } .sconce-tools { display: flex; flex-shrink: 0; gap: var(--rhythm-sm); } .sconce-agree, .sconce-skip { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding-inline: var(--rhythm-md); border-radius: var(--curve-sm); font-family: var(--family-title); font-size: var(--text-size-h6); font-weight: var(--weight-strong); letter-spacing: var(--tracking-open); text-transform: uppercase; white-space: nowrap; cursor: pointer; } .sconce-agree { border: 0; background-color: var(--chroma-page); color: var(--chroma-glyph); } .sconce-agree:hover { background-color: var(--chroma-key-active); color: var(--chroma-glyph); } .sconce-skip { border: var(--stroke-fine) solid var(--chroma-page); background-color: var(--chroma-raised); color: var(--chroma-glyph); } .sconce-skip:hover { background-color: var(--chroma-page); color: var(--chroma-glyph); } @media (max-width: 720px) { .sconce-line { flex-direction: column; align-items: stretch; gap: var(--rhythm-xs); padding: var(--rhythm-sm) var(--bounds-edge-narrow); } .sconce-notice { font-size: var(--text-size-petite); line-height: 1.35; } .sconce-agree, .sconce-skip { min-height: 40px; padding-inline: var(--rhythm-sm); font-size: var(--text-size-petite); } .sconce-tools { gap: var(--rhythm-xs); } } @media (max-width: 430px) { .sconce-agree, .sconce-skip { flex: 1 1 auto; white-space: normal; } } /* ============================================================ Shared container step-down for narrow viewports ============================================================ */ @media (max-width: 1040px) { .frieze-band, .mantle-body, .bay-body, .deck-body, .mullion-body, .sigil-body, .filigree-body, .rafter-body, .lattice-body, .desk-body, .hallway-body, .gallery-body, .promenade-body, .trellis, .barrow-frame { padding-inline: var(--bounds-pad-md); } } @media (max-width: 720px) { .frieze-band, .mantle-body, .bay-body, .deck-body, .mullion-body, .sigil-body, .filigree-body, .rafter-body, .lattice-body, .desk-body, .hallway-body, .gallery-body, .promenade-body, .trellis, .barrow-frame { padding-inline: var(--bounds-edge-narrow); } } /* ============================================================ Reduced motion ============================================================ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; } } /* ============================================================ Offer button — colour, ring animation and hover states rolled by scripts/cta-style.mjs for this domain (class renamed, cadence kept, reference easings swapped for this build's motion tokens). ============================================================ */ .quarry-act { position: relative; display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 var(--rhythm-lg); border: var(--stroke-base) solid #0d9488; border-radius: var(--curve-capsule); background-color: #0d9488; box-shadow: var(--depth-sm); color: #121314; font-family: var(--family-title); font-size: 14px; font-weight: var(--weight-strong); letter-spacing: var(--tracking-open); text-decoration: none; text-transform: uppercase; transition: background-color var(--duration-mid) var(--glide-release), border-color var(--duration-mid) var(--glide-release); } .quarry-act.quarry-act { color: #121314; text-decoration: none; } .quarry-act::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; animation: quarry-wake calc(var(--duration-slow) * 2) var(--glide-release) infinite; } @keyframes quarry-wake { 0% { box-shadow: 0 0 0 0 currentColor; opacity: 0.55; } 70%, 100% { box-shadow: 0 0 0 5px transparent; opacity: 0; } } .quarry-act:hover { background-color: #0f766e; border-color: #0f766e; color: #ffffff; animation: none; } .quarry-act.quarry-act:hover { color: #ffffff; text-decoration: none; } .quarry-act:hover::after { animation: none; } .quarry-act:active { background-color: #115e59; border-color: #115e59; color: #ffffff; } .quarry-act:focus-visible { outline: 3px solid #ffffff; outline-offset: 3px; } .mullion-star .quarry-act { border-color: var(--chroma-page); box-shadow: var(--depth-md); } @media (max-width: 1380px) { .transom-tap.quarry-act { min-height: 46px; padding: 0 var(--rhythm-sm); font-size: var(--text-size-petite); } } @media (prefers-reduced-motion: reduce) { .quarry-act, .quarry-act::after { animation: none !important; transition: none !important; } } /* offer-button placements */ .mantle-tap, .deck-tap, .lattice-tap { flex-shrink: 0; max-width: 100%; } .lattice-tap { margin-inline: auto; } @media (max-width: 460px) { .mantle-tap, .deck-tap, .lattice-tap { width: 100%; } }