/* ============================================================================ Tata's 90th — shared design tokens and components. Lifted from design-explore/final.html. Every page loads this file first and then adds only its own section-specific CSS. The typefaces are loaded by each page's , not from here: ========================================================================= */ :root{ --navy:#0A2B5E; /* Blue Angels insignia blue */ --navy-deep:#061B3D; --navy-lift:#123A75; --amber:#F0A11E; /* hue of his lenses, saturated for screen */ --amber-lit:#FFC24D; --amber-deep:#A34A26; /* the actual lens shadow */ --cream:#F7F2E8; --ink:#16202E; --ink-soft:#4A5567; --disp:'Archivo',system-ui,'Helvetica Neue',Arial,sans-serif; --body:'Source Serif 4',Georgia,'Times New Roman',serif; --mono:'JetBrains Mono',ui-monospace,Menlo,Consolas,monospace; } /* ---------- reset ---------- */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{ margin:0;background:var(--navy-deep);color:var(--cream); font-family:var(--body);font-size:19px;line-height:1.6; -webkit-font-smoothing:antialiased; -webkit-tap-highlight-color:rgba(240,161,30,.22); padding-bottom:env(safe-area-inset-bottom); } img{max-width:100%;display:block} a{color:inherit} [hidden]{display:none!important} /* Never below 16px or iOS Safari auto-zooms the page on focus. */ input,select,textarea,button{font-family:inherit;font-size:17px} /* ---------- focus ---------- */ :focus-visible{outline:3px solid var(--amber-lit);outline-offset:3px;border-radius:2px} /* ---------- layout ---------- */ .wrap{max-width:430px;margin:0 auto;position:relative} @media(min-width:900px){.wrap{max-width:1080px}} /* ---------- eyebrow ---------- */ .eyebrow{ font-family:var(--mono);font-size:12.5px;font-weight:700; letter-spacing:.18em;text-transform:uppercase;color:var(--amber); margin:0 0 14px; } .eyebrow--ink{color:var(--amber-deep)} /* ---------- section chrome ---------- */ .section{padding:44px 22px} .section--cream{background:var(--cream);color:var(--ink)} .section--navy{background:var(--navy)} .section__h{ font-family:var(--disp);font-weight:800; font-size:clamp(30px,8.4vw,38px);line-height:1.05; letter-spacing:-.02em;margin:0 0 18px; } .section--cream .section__h{color:var(--navy)} .section p{margin:0 0 18px} .section--cream p{color:var(--ink-soft)} .section p:last-child{margin-bottom:0} /* ---------- the button ---------- */ .btn{ display:flex;align-items:center;justify-content:center; width:100%;min-height:66px;padding:18px 16px; background:var(--amber);color:var(--navy-deep); font-family:var(--disp);font-weight:900;font-size:19px; letter-spacing:-.01em;text-decoration:none; border:0;border-bottom:5px solid var(--amber-deep); cursor:pointer;transition:transform .12s ease,filter .12s ease; } .btn:hover{filter:brightness(1.07)} .btn:active{transform:translateY(2px);border-bottom-width:3px} .btn[disabled],.btn[aria-disabled="true"]{opacity:.5;pointer-events:none} .btn>span{white-space:nowrap} /* the shaka he throws in the photograph, waving the family in */ .shaka{width:36px;height:auto;flex:0 0 36px;fill:var(--navy-deep);margin-right:12px} .btn:hover .shaka{animation:shaka-wave .6s ease-in-out} @keyframes shaka-wave{ 0%,100%{transform:rotate(0)} 25%{transform:rotate(-14deg)} 75%{transform:rotate(14deg)} } @media(min-width:900px){ .section{padding:56px 40px} .btn{max-width:460px;margin:0 auto} } @media(prefers-reduced-motion:reduce){ *{animation:none!important;transition:none!important} } /* Smooth scroll for the hero's RSVP jump, with scroll-margin so the section heading is not hidden under the top edge. Off for reduced-motion. */ html{ scroll-behavior:smooth; } #rsvp-section{ scroll-margin-top:18px; } @media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }