/* ========================================================================== Shared primitives for the sections below the hero Source of truth: design_handoff_sections/README.md ("Shared components"). Every section below the hero is built from these five pieces plus the reveal system. They live here rather than being repeated per section file, which is how the handoff itself is organised. ========================================================================== */ /* --- Scroll reveal -------------------------------------------------------- Each section observes itself and releases its own children on first intersection (js/reveal.js). Children carry their delay as --d and, where the handoff asks for a slower entrance, their duration as --rd. Scoped to .js on — set by an inline script in the head — so nothing is ever hidden when scripting is unavailable. */ .js [data-reveal] { opacity: 0; } .js [data-reveal-section].is-revealed [data-reveal] { animation: aoaRise var(--rd, 1s) var(--ease-out) var(--d, 0s) both; } /* Photo panels enter further and slower than copy. */ .js [data-reveal-section].is-revealed [data-reveal="panel"] { animation: aoaPanel 1.35s var(--ease-out) var(--d, 0s) both; } @keyframes aoaRise { from { opacity: 0; transform: translateY(38px); } to { opacity: 1; transform: none; } } @keyframes aoaPanel { from { opacity: 0; transform: translateY(64px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .js [data-reveal], .js [data-reveal-section].is-revealed [data-reveal], .js [data-reveal-section].is-revealed [data-reveal="panel"] { opacity: 1; transform: none; animation: none; } } /* --- Section shell -------------------------------------------------------- */ .section { position: relative; width: 100%; } /* 1px top rule opening every section. */ .section::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; z-index: 5; pointer-events: none; background: var(--grad-hairline); } .section--strong-rule::before { background: var(--grad-hairline-strong); } /* Ambient glow. Position and alpha are set per section via --glow. */ .section__glow { position: absolute; inset: 0; pointer-events: none; background: var(--glow); } .section__inner { position: relative; z-index: 1; } /* --- Eyebrow -------------------------------------------------------------- */ .eyebrow { display: flex; align-items: center; gap: var(--space-14); } .eyebrow::before { content: ''; flex: none; width: 7px; height: 7px; background: var(--gold-diamond); transform: rotate(45deg); } .eyebrow span { font-family: var(--font-ui); font-weight: 500; font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: rgba(217, 169, 58, .86); } /* Centred variant: the diamond sits inline with the label. */ .eyebrow--center { justify-content: center; } /* --- Gradient headline word ----------------------------------------------- The padding/margin pair is load-bearing: background-clip paints only the text box, so without room below the baseline the gradient crops descenders. */ .metal { display: inline-block; background: var(--grad-metal); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: .16em; margin-bottom: -.16em; } /* Figures and prices keep the padding but NOT the negative margin. The margin exists for a gradient word sitting inline in a headline, where the padding would otherwise push the following line down. A block figure is followed by its own label, and cancelling the padding there lets the digits — which already overflow a sub-1 line-height — land on top of it. */ .metal--figure { padding-bottom: .08em; } .metal--price { padding-bottom: .06em; } /* --- Primary CTA (gold plate) --------------------------------------------- The highlight sweeps across on hover by sliding an over-wide gradient, rather than by changing colour. */ .cta-plate { display: inline-flex; align-items: stretch; border-radius: var(--radius); background-image: var(--grad-cta-plate); background-size: 232% 100%; background-position: 84% 0; color: #1A1206; box-shadow: var(--shadow-cta); transition: background-position .8s var(--ease-out), box-shadow .4s ease; } .cta-plate:hover, .cta-plate:focus-visible { color: #1A1206; background-position: 10% 0; box-shadow: var(--shadow-cta-hover); } .cta-plate__label { padding: 22px 30px 22px 38px; font-family: var(--font-ui); font-weight: 600; font-size: 12px; line-height: 1.1; letter-spacing: .17em; text-transform: uppercase; } /* The hero's primary call to action, which wants the plate's gradient, shadow and shimmer but not the divided arrow cap. The label's padding is asymmetric to balance that cap; with no cap it has to be even. */ .cta-plate--plain .cta-plate__label { padding: 22px 38px; } .cta-plate__divider { width: 1px; background: rgba(86, 54, 8, .32); } .cta-plate__arrow { display: inline-flex; align-items: center; justify-content: center; width: 50px; font-size: 14px; } /* --- Secondary CTA (underlined link) -------------------------------------- The rule is a background image, not a border, so it can sit below the baseline and fade independently of the text. */ .cta-link { display: inline-flex; align-items: center; align-self: flex-start; gap: 13px; padding: 20px 2px; min-height: 57px; font-family: var(--font-ui); font-weight: 600; font-size: 12px; letter-spacing: .17em; text-transform: uppercase; color: var(--gold-cta-text); background-image: linear-gradient(rgba(217, 169, 58, .34), rgba(217, 169, 58, .34)); background-repeat: no-repeat; background-size: 100% 1px; background-position: 0 calc(50% + 12px); transition: color .3s ease, background-image .3s ease, gap .45s var(--ease-out); } .cta-link:hover, .cta-link:focus-visible { color: var(--gold-cta-hover); gap: 21px; background-image: linear-gradient(rgba(217, 169, 58, .92), rgba(217, 169, 58, .92)); } /* Tightened inside pricing cards, where horizontal room is short. */ .cta-link--tight { gap: 8px; letter-spacing: .1em; white-space: nowrap; } .cta-link--tight:hover, .cta-link--tight:focus-visible { gap: 13px; } /* --- Bullets -------------------------------------------------------------- */ .bullets { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; } .bullets li { position: relative; padding-left: 16px; font-size: 13.5px; font-weight: 300; line-height: 1.55; color: rgba(246, 241, 230, .72); text-wrap: pretty; } .bullets li::before { content: ''; position: absolute; left: 1px; top: .5em; width: 5px; height: 5px; background: rgba(217, 169, 58, .82); transform: rotate(45deg); } /* --- Shared type ---------------------------------------------------------- */ .section-h2 { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: 70px; line-height: 1.02; letter-spacing: -.024em; color: var(--bone); text-wrap: pretty; } .section-lede { margin: 0; font-family: var(--font-ui); font-weight: 300; font-size: 17px; line-height: 1.75; color: rgba(246, 241, 230, .62); text-wrap: pretty; } /* Playfair ships old-style figures by default, which drop below the baseline. Every numeral in these sections needs this. */ .lining-nums { font-variant-numeric: lining-nums; font-feature-settings: 'lnum' 1, 'onum' 0; } .lining-nums--tabular { font-variant-numeric: lining-nums tabular-nums; font-feature-settings: 'lnum' 1, 'onum' 0, 'tnum' 1; } /* --- Responsive ----------------------------------------------------------- */ @media (max-width: 768px) { .section-h2 { font-size: clamp(38px, 9vw, 70px); } /* Full width and centred rather than shrink-to-fit: at 390px the labels ("Apply for elite mentorship", "Contact for private consultation") broke mid-phrase inside a narrow plate. */ .cta-plate { width: 100%; justify-content: center; } .cta-plate__label { flex: 1; padding: 20px 16px; text-align: center; letter-spacing: .12em; /* 48px of vertical tap target before padding. */ min-height: 20px; } .cta-plate__arrow { width: 46px; } /* Comfortable thumb target, and room to breathe from the copy above. */ .cta-link { min-height: 52px; padding: 16px 2px; } .bullets li { font-size: 14px; } }