/* ========================================================================== Design tokens — AOA Credit Solutions Source of truth: design_handoff_hero/README.md ("Design Tokens"). Values are final; do not tune locally — change them here. ========================================================================== */ :root { /* --- Color: ground ---------------------------------------------------- */ --black-page: #0B0907; /* page bed, outside the hero */ --black-deep: #060504; /* hero bed */ --black-bar: #050403; /* stats bar */ /* Section beds introduced by design_handoff_sections. */ --black-proof: #14110D; /* Proof, Data Furnisher */ --black-card: #0A0806; /* form card, video cell */ --black-card-2: #0C0A07; /* Standard card, mentorship card */ --black-premium: #100D09; --black-elite: #13100B; --black-blackcard: #16120C; /* --- Color: bone ------------------------------------------------------ */ --bone: #F7F2E6; /* headline */ --bone-body: rgba(246, 241, 230, .88); --bone-label: rgba(240, 233, 220, .78); --bone-mute: rgba(237, 229, 213, .62); /* --- Color: gold ------------------------------------------------------ */ --gold: #D9A93A; --gold-deep: #B8871F; --gold-figure: #EFD79B; --gold-cta-text: #E3BC5E; --gold-hover: #F5DFA6; --gold-link-hover:#F0D083; --gold-diamond: #C9971F; /* eyebrow diamond, bullet markers */ --gold-cta-hover: #F7E3AA; /* secondary CTA hover */ /* Gold hairlines, by weight */ --gold-rule: rgba(217, 169, 58, .26); /* stats bar top border */ --gold-seam: rgba(217, 169, 58, .30); /* panel seams */ --gold-divider: rgba(217, 169, 58, .45); /* wordmark divider */ /* --- Gradients -------------------------------------------------------- */ /* Metallic text fill for the headline accent line */ --grad-metal: linear-gradient(100deg, #8A6014 0%, #F5DE9A 26%, #C9971F 48%, #FBEFC6 66%, #B98A22 100%); /* Primary CTA fill — the hero's flat plate. */ --grad-cta: linear-gradient(150deg, #F2D68B 0%, #D2A231 45%, #A9761B 100%); /* Primary CTA plate used by the sections below the hero: a wider gradient that slides on hover, so the highlight sweeps across the plate. Distinct from --grad-cta above; both are in use. */ --grad-cta-plate: linear-gradient(105deg, #8F6314 0%, #B4801E 16%, #DDB147 33%, #FBEFC6 45%, #E4C067 56%, #C9971F 74%, #8F6314 100%); /* The metallic bar laid along an edge. Five stops at 105deg — related to --grad-cta-plate but not the same ramp; the plate's has extra stops so the highlight survives sliding across a wide button. */ --grad-metal-bar: linear-gradient(105deg, #8F6314 0%, #DDB147 33%, #FBEFC6 47%, #C9971F 72%, #8F6314 100%); /* Section top hairline, and the heavier variant Mentorship / Ready To Win use. */ --grad-hairline: linear-gradient(90deg, rgba(217, 169, 58, 0) 0%, rgba(217, 169, 58, .3) 15%, rgba(217, 169, 58, .3) 85%, rgba(217, 169, 58, 0) 100%); --grad-hairline-strong: linear-gradient(90deg, rgba(217, 169, 58, 0) 0%, rgba(217, 169, 58, .42) 15%, rgba(217, 169, 58, .42) 85%, rgba(217, 169, 58, 0) 100%); /* Amber glow rising off the stats bar */ --grad-glow: linear-gradient(to top, rgba(168, 112, 28, .42) 0%, rgba(150, 98, 24, .26) 26%, rgba(122, 78, 20, .12) 52%, rgba( 92, 58, 14, .04) 74%, rgba( 6, 5, 4, 0) 100%); /* Left-to-right scrim fading the photography to black under the copy */ --grad-scrim: linear-gradient(90deg, rgba(6, 5, 4, .86) 0%, rgba(6, 5, 4, .80) 14%, rgba(6, 5, 4, .68) 28%, rgba(6, 5, 4, .46) 40%, rgba(6, 5, 4, .20) 49%, rgba(6, 5, 4, 0) 57%); /* Foot: the bottom of the hero dissolving into the black of the section below, so the two meet without a visible seam. */ --grad-hero-foot: linear-gradient(to top, rgba(6, 5, 4, 1) 0%, rgba(6, 5, 4, .88) 7%, rgba(6, 5, 4, .45) 16%, rgba(6, 5, 4, 0) 28%); /* Sky darkener: sits above the flat scrim and pulls the top of the frame to black, so the photograph's sky never reads as blue daylight. */ --grad-sky: linear-gradient(to bottom, rgba(6, 5, 4, .88) 0%, rgba(6, 5, 4, .45) 30%, rgba(6, 5, 4, 0) 55%); /* Flat scrim: one consistent darkening across the whole photograph. */ --scrim-flat: rgba(6, 5, 4, .70); /* Kept for reference — the handoff's left-to-right fade, superseded by the flat scrim above. */ --grad-scrim-full: linear-gradient(90deg, rgba(6, 5, 4, .90) 0%, rgba(6, 5, 4, .82) 32%, rgba(6, 5, 4, .74) 66%, rgba(6, 5, 4, .68) 100%); --grad-vignette: radial-gradient(130% 108% at 46% 50%, rgba(6, 5, 4, 0) 44%, rgba(6, 5, 4, .5) 100%); /* Vertical fade applied to the seam hairlines */ --grad-seam: linear-gradient(to bottom, rgba(217, 169, 58, 0) 0%, var(--gold-seam) 26%, var(--gold-seam) 74%, rgba(217, 169, 58, 0) 100%); /* --- Type ------------------------------------------------------------- */ --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif; --font-ui: Karla, system-ui, -apple-system, 'Segoe UI', sans-serif; /* --- Spacing scale ---------------------------------------------------- */ --space-14: 14px; --space-16: 16px; --space-20: 20px; --space-26: 26px; --space-38: 38px; --space-56: 56px; /* Steps the sections below the hero add to the scale. */ --space-7: 7px; --space-10: 10px; --space-13: 13px; --space-18: 18px; --space-22: 22px; --space-24: 24px; --space-30: 30px; --space-34: 34px; --space-44: 44px; --space-72: 72px; --space-80: 80px; --space-88: 88px; --space-100: 100px; --space-118: 118px; --space-132: 132px; /* Page gutter — every full-width section pads to this, so sections stay on a shared left edge. Overridden per breakpoint at the bottom of this file. */ --gutter: var(--space-56); /* --- Radius ----------------------------------------------------------- */ --radius: 0; /* nothing in this design is rounded */ /* --- Shadows ---------------------------------------------------------- */ --shadow-headline: 0 6px 40px rgba(6, 5, 4, .85); --shadow-body: 0 1px 24px rgba(6, 5, 4, .9); /* Box shadows for the sections below the hero. */ --shadow-card: 0 26px 52px rgba(0, 0, 0, .5); --shadow-card-hover: 0 32px 62px rgba(0, 0, 0, .62); --shadow-mentor: 0 30px 64px rgba(0, 0, 0, .55); --shadow-frame: 0 34px 64px rgba(0, 0, 0, .66); --shadow-form: 0 40px 80px rgba(0, 0, 0, .72); --shadow-cta: inset 0 1px 0 rgba(255, 246, 220, .5), inset 0 -1px 0 rgba(74, 44, 4, .45), 0 16px 36px rgba(0, 0, 0, .42); --shadow-cta-hover: inset 0 1px 0 rgba(255, 250, 232, .7), inset 0 -1px 0 rgba(74, 44, 4, .5), 0 20px 46px rgba(0, 0, 0, .56); /* --- Focus ------------------------------------------------------------ */ /* Not in the handoff — the prototype has no focus styling at all. Gold on near-black needs a visible ring for keyboard users. */ --focus-ring: 2px solid var(--gold-figure); --focus-offset: 2px; /* --- Motion ----------------------------------------------------------- */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* every entrance */ --ease-sheen: cubic-bezier(0.4, 0, 0.2, 1); /* headline gradient sweep */ } /* --- Breakpoint overrides ------------------------------------------------- Only layout tokens change with viewport; color and type do not. */ /* Spec says the 56px gutter shrinks at ~1180px; 1100 is the breakpoint this project already uses. */ @media (max-width: 1100px) { :root { --gutter: 32px; } } @media (max-width: 1024px) { :root { --gutter: var(--space-38); } } @media (max-width: 768px) { :root { --gutter: var(--space-20); } } /* Landscape on a notched phone puts the notch in the left or right margin, so the gutter has to be at least as wide as the inset or copy runs under it. Never narrower than the 20px above. */ @supports (padding: max(0px)) { @media (max-width: 768px) { :root { --gutter: max(var(--space-20), env(safe-area-inset-left), env(safe-area-inset-right)); } } }