/* ===================================================================== The Bridge — WEB layer · load AFTER bridge.css --------------------------------------------------------------------- Tokenized from the TMRE Bridge event landing page (VIP launch invite). That page hand-rolled its surfaces, type, buttons and form fields as inline styles; everything reusable from it lives here as tokens + classes so the next Bridge web page starts from the system. House rules enforced here: · Headlines are UPRIGHT. No italic headline or italic payoff phrase. · No em dashes in copy. · Only the brand gradients. No new gradients. ===================================================================== */ :root{ /* --- Surfaces ------------------------------------------------------- desk = page background behind the sheet. paper/paper-2 = the sheet itself (paper-2 carries the mirrored bloom for alternating bands). */ --bridge-desk: #F8F8F9; --bridge-paper: radial-gradient(120% 90% at 0% 0%, rgba(232,52,140,.06) 0%, rgba(142,63,184,.03) 38%, transparent 66%), #FFFFFF; --bridge-paper-2: radial-gradient(110% 100% at 100% 0%, rgba(232,52,140,.07) 0%, rgba(142,63,184,.035) 42%, transparent 70%), #F7F6FA; --bridge-night: #08152A; /* photo-section base under a scrim */ /* --- Ink ------------------------------------------------------------- */ --bridge-ink: #555555; /* body copy */ --bridge-head: #223D64; /* solid headings, field text */ --bridge-num: #223D64; /* numeric/data values */ --bridge-label: #1C9AC4; /* eyebrows, field labels, links */ --bridge-muted: rgba(34,61,100,.60); /* --- Lines, fields, glass -------------------------------------------- */ --bridge-hair: rgba(34,61,100,.13); --bridge-perf: rgba(34,61,100,.32); /* perforated tear rule dots */ --bridge-field: rgba(255,255,255,.92); --bridge-field-bd: rgba(34,61,100,.20); --bridge-focus-ring:0 0 0 3px rgba(28,154,196,.18); --bridge-card: rgba(255,255,255,.88); --bridge-glass: rgba(255,255,255,.82); --bridge-glass-bd: rgba(34,61,100,.12); /* --- CTA gradient --------------------------------------------------- The landing page CTA is a longer-ramped sibling of --bridge-grad: same coral -> pink -> violet family, more stops so a wide pill keeps its warm start. Use for web buttons; --bridge-grad for lettering. */ --bridge-grad-cta: linear-gradient(100deg,#F87A61 0%,#F36571 20%,#EE5183 40%,#EB458D 58%,#EB4191 72%,#A85EBD 100%); --bridge-grad-text-on-photo: linear-gradient(90deg,#FF9070 0%,#FA7A8E 24%,#F45BA3 52%,#DE6CC4 78%,#C88BDC 100%); --bridge-cta-shadow: 0 12px 32px -14px rgba(232,52,140,.7); --bridge-cta-shadow-hover:0 16px 38px -14px rgba(232,52,140,.8); --bridge-ease: cubic-bezier(.2,.7,.2,1); /* --- Accents (event/marketing chips + glass tiles) ------------------- */ --bridge-aqua: #5BBFC0; --bridge-sun: #FF8A5C; } [data-theme="dark"]{ --bridge-desk: #090E1A; --bridge-paper: linear-gradient(122deg,#0B1A32 0%,#152449 46%,#101A3A 100%); --bridge-paper-2: rgba(255,255,255,.055); --bridge-ink: rgba(255,255,255,.74); --bridge-head: #FFFFFF; --bridge-num: #FFFFFF; --bridge-label: #5BBFC0; --bridge-muted: rgba(255,255,255,.56); --bridge-hair: rgba(255,255,255,.12); --bridge-perf: rgba(255,255,255,.42); --bridge-field: rgba(255,255,255,.05); --bridge-field-bd: rgba(255,255,255,.17); --bridge-card: rgba(255,255,255,.06); --bridge-glass: rgba(18,28,50,.78); --bridge-glass-bd: rgba(255,255,255,.14); } /* ===================================================================== 1 · TYPE Bridge web type runs on two families: --font-numeric for headings and data, --font-ui for eyebrows/labels/buttons, --font-sans for body. Every heading below is upright by rule. An inside one carries emphasis through color or weight, never slant. ===================================================================== */ .bridge-h1,.bridge-h2,.bridge-h3,.bridge-sub,.bridge-stat,.bridge-fact__val,.bridge-eyebrow,.bridge-kicker,.bridge-label-xs{font-style:normal} .bridge-h1 em,.bridge-h2 em,.bridge-h3 em,.bridge-sub em,.bridge-eyebrow em,.bridge-kicker em{font-style:normal;font-weight:700;color:inherit} .bridge-h1{margin:0;font-family:var(--font-numeric);font-weight:600;font-size:clamp(34px,5.3vw,70px);line-height:1.04;letter-spacing:-.015em;text-wrap:balance} .bridge-h2{margin:0;font-family:var(--font-numeric);font-weight:700;font-size:clamp(24px,2.6vw,34px);line-height:1.14;letter-spacing:-.02em;text-wrap:balance} .bridge-h3{margin:0;font-family:var(--font-numeric);font-weight:700;font-size:26px;line-height:1.25;letter-spacing:-.015em;text-wrap:balance} /* deck-style subhead under an h1, still upright */ .bridge-sub{margin:0;font-family:var(--font-numeric);font-weight:500;font-size:clamp(22px,2.2vw,30px);line-height:1.28;letter-spacing:-.01em;text-wrap:balance} /* Eyebrow: the thin all-caps line above a headline. On photo it is white. */ .bridge-eyebrow{display:flex;flex-wrap:wrap;align-items:center;gap:14px;font-family:var(--font-ui);font-weight:700;font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--bridge-label)} .bridge-eyebrow--on-photo{color:#fff} .bridge-eyebrow__dot{width:4px;height:4px;border-radius:999px;background:currentColor;opacity:.55} /* Kicker: section heading, teal, all caps. */ .bridge-kicker{margin:0;font-family:var(--font-ui);font-weight:700;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--bridge-label)} .bridge-kicker--on-photo{color:var(--bridge-aqua)} /* Micro label above a value or field. */ .bridge-label-xs{font-family:var(--font-ui);font-weight:700;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--bridge-label)} .bridge-label-xs--muted{color:var(--bridge-muted)} .bridge-body{margin:0;font-family:var(--font-sans);font-size:15.5px;line-height:1.7;color:var(--bridge-ink);max-width:44ch;text-wrap:pretty} .bridge-body--sm{font-size:14px;line-height:1.65} /* Data: big numeral + unit. Tabular so countdowns do not jitter. */ .bridge-stat{font-family:var(--font-numeric);font-weight:600;font-size:clamp(42px,4.4vw,54px);line-height:1;letter-spacing:-.02em;color:var(--bridge-num);font-variant-numeric:tabular-nums} .bridge-fact__val{font-family:var(--font-numeric);font-weight:500;font-size:clamp(19px,1.6vw,23px);letter-spacing:.01em;color:var(--bridge-num);white-space:nowrap} /* Gradient lettering. bridge.css defines .bridge-grad-text; on a dark photo swap to the brightened ramp and add the double drop shadow for contrast. */ .bridge-grad-text{width:fit-content;max-width:100%} .bridge-grad-text--on-photo{background-image:var(--bridge-grad-text-on-photo);filter:drop-shadow(0 2px 5px rgba(4,10,24,.85)) drop-shadow(0 6px 22px rgba(4,10,24,.7))} /* ===================================================================== 2 · BUTTONS One button: the gradient pill. Hover LIGHTENS, never darkens. .bridge-cta (compact, from bridge.css) + the web sizes below. ===================================================================== */ .bridge-btn{display:inline-flex;align-items:center;justify-content:center;height:54px;padding:0 36px;box-sizing:border-box;border:none;border-radius:999px;background:var(--bridge-grad-cta);color:#fff;font-family:var(--font-ui);font-weight:700;font-size:13px;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;white-space:nowrap;cursor:pointer;box-shadow:var(--bridge-cta-shadow);transition:filter .3s var(--bridge-ease),box-shadow .3s var(--bridge-ease),transform .3s var(--bridge-ease)} .bridge-btn:hover{filter:brightness(1.05);box-shadow:var(--bridge-cta-shadow-hover);transform:translateY(-1px)} .bridge-btn:active{transform:translateY(0)} .bridge-btn:focus-visible{outline:none;box-shadow:var(--bridge-cta-shadow),var(--bridge-focus-ring)} .bridge-btn[disabled],.bridge-btn:disabled{opacity:.55;cursor:default;filter:none;transform:none} .bridge-btn--lg{height:56px;padding:0 26px} .bridge-btn--block{width:100%} /* Quiet secondary: outline pill on a light surface, for a non-primary path. */ .bridge-btn--ghost{background:none;color:var(--bridge-head);box-shadow:inset 0 0 0 1px var(--bridge-field-bd)} .bridge-btn--ghost:hover{filter:none;box-shadow:inset 0 0 0 1px var(--bridge-label);transform:translateY(-1px)} /* Chip / pill badge (Free gift, Prize drawing, Seat held). */ .bridge-chip{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:999px;font-family:var(--font-ui);font-weight:700;font-size:10px;letter-spacing:.18em;text-transform:uppercase;background:var(--bridge-aqua);color:#0B1B33} .bridge-chip--sun{background:var(--bridge-sun);color:#2A0E1E} .bridge-chip--soft{background:rgba(91,191,192,.16);color:var(--bridge-head)} /* ===================================================================== 3 · BACKGROUNDS ===================================================================== */ .bridge-desk{background:var(--bridge-desk)} /* The sheet: rounded card the whole page sits inside. */ .bridge-sheet{border-radius:22px;background:var(--bridge-paper);box-shadow:0 40px 90px -50px rgba(20,18,58,.55),0 2px 0 rgba(255,255,255,.04) inset} .bridge-band{background:var(--bridge-paper-2)} .bridge-pad{padding:clamp(34px,4vw,60px) clamp(24px,3.4vw,50px)} /* Perforated tear rule between bands (the boarding-pass seam). */ .bridge-perf-rule{height:3px;background-image:radial-gradient(circle at center,var(--bridge-perf) 1.5px,transparent 1.6px);background-size:8px 3px;background-repeat:repeat-x;background-position:left center} /* Photo band: night base + directional scrim so left-side text stays legible. */ .bridge-photo-band{position:relative;overflow:hidden;background:var(--bridge-night)} .bridge-photo-band>.bridge-scrim{position:absolute;inset:0;background:linear-gradient(100deg,rgba(6,16,34,.92) 0%,rgba(7,19,40,.84) 38%,rgba(20,30,70,.6) 72%,rgba(40,30,90,.44) 100%)} .bridge-scrim--pink-corner{position:absolute;inset:0;background:radial-gradient(85% 80% at 96% 4%, rgba(232,52,140,.12) 0%, transparent 60%)} /* Drifting brand blooms. Decorative only, disabled for reduced motion. */ .bridge-blob{position:absolute;border-radius:50%;pointer-events:none;will-change:transform} .bridge-blob--pink{background:radial-gradient(closest-side, rgba(232,52,140,.112) 0%, transparent 78%);animation:bridgeDrift1 15s cubic-bezier(.45,0,.55,1) infinite} .bridge-blob--violet{background:radial-gradient(closest-side, rgba(168,94,189,.104) 0%, transparent 78%);animation:bridgeDrift2 20s cubic-bezier(.45,0,.55,1) infinite;animation-delay:-11s} .bridge-blob--coral{background:radial-gradient(closest-side, rgba(248,122,97,.128) 0%, transparent 78%);animation:bridgeDrift3 18s cubic-bezier(.45,0,.55,1) infinite;animation-delay:-20s} @keyframes bridgeDrift1{0%{transform:translate3d(-12%,-8%,0) scale(1)}25%{transform:translate3d(18%,6%,0) scale(1.22)}50%{transform:translate3d(8%,22%,0) scale(1.05)}75%{transform:translate3d(-14%,12%,0) scale(1.18)}100%{transform:translate3d(-12%,-8%,0) scale(1)}} @keyframes bridgeDrift2{0%{transform:translate3d(16%,14%,0) scale(1.16)}30%{transform:translate3d(-10%,-4%,0) scale(1)}55%{transform:translate3d(-22%,16%,0) scale(1.24)}80%{transform:translate3d(6%,-14%,0) scale(1.08)}100%{transform:translate3d(16%,14%,0) scale(1.16)}} @keyframes bridgeDrift3{0%{transform:translate3d(8%,28%,0) scale(1.05)}35%{transform:translate3d(-30%,-20%,0) scale(1.32)}65%{transform:translate3d(24%,-10%,0) scale(.95)}100%{transform:translate3d(8%,28%,0) scale(1.05)}} @keyframes bridgeRise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}} @media (prefers-reduced-motion:reduce){.bridge-blob{animation:none !important}} /* Cards. Glass sits on paper; the gradient tiles sit on photo. */ .bridge-glass-card{position:relative;overflow:hidden;padding:clamp(24px,2.4vw,34px);border-radius:20px;background:var(--bridge-card);backdrop-filter:blur(16px) saturate(160%);-webkit-backdrop-filter:blur(16px) saturate(160%);border:1px solid var(--bridge-hair);box-shadow:0 24px 60px -40px rgba(20,18,58,.5)} .bridge-tile{position:relative;overflow:hidden;padding:26px 28px 28px;border-radius:20px;backdrop-filter:blur(22px) saturate(150%);-webkit-backdrop-filter:blur(22px) saturate(150%);border:1px solid rgba(255,255,255,.28);box-shadow:0 1px 0 rgba(255,255,255,.2) inset,0 20px 44px -28px rgba(0,0,0,.5);color:#fff} .bridge-tile--aqua{background:linear-gradient(125deg,rgba(91,191,192,.30),rgba(29,103,169,.30))} .bridge-tile--warm{background:linear-gradient(125deg,rgba(255,138,92,.34),rgba(251,64,165,.34));border-color:rgba(255,255,255,.32)} /* Fact rail: the white pill of labeled values, optional CTA welded on. */ .bridge-facts{display:flex;flex-wrap:nowrap;align-items:center;padding:8px 15px 8px 0;background:#F7F7FA;border-radius:999px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)} .bridge-facts__cell{padding:8px 20px 10px} .bridge-facts__cell:first-child{padding-left:28px} .bridge-facts__div{width:1px;align-self:stretch;background:rgba(0,0,0,.14);margin:8px 0} .bridge-facts .bridge-label-xs{font-size:11px;letter-spacing:.18em;color:#1C9AC4} .bridge-facts .bridge-fact__val{color:#223D64;margin-top:8px} @media (max-width:820px){ .bridge-facts{flex-wrap:wrap;border-radius:26px;padding:12px;width:100%;box-sizing:border-box;row-gap:2px} .bridge-facts__cell{flex:1 1 42%;padding:10px 14px} .bridge-facts__cell:first-child{padding-left:14px} .bridge-facts__div{display:none} .bridge-facts .bridge-btn{width:100%;justify-content:center;margin:8px 0 0} } /* ===================================================================== 4 · FORMS Pill fields, teal micro-labels, teal focus ring. Fields live inside a .bridge-glass-card; the grid auto-fits to two columns and collapses to one. Full-width rows use .bridge-field--wide. ===================================================================== */ .bridge-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));align-content:start;gap:18px 20px} .bridge-field{display:flex;flex-direction:column;gap:9px} .bridge-field--wide{grid-column:1/-1} .bridge-field--reveal{animation:bridgeRise 320ms var(--bridge-ease) both} .bridge-input,.bridge-select{height:52px;padding:0 22px;box-sizing:border-box;font-family:var(--font-sans);font-size:15px;color:var(--bridge-head);background:var(--bridge-field);border:1px solid var(--bridge-field-bd);border-radius:999px;outline:none} .bridge-input::placeholder{color:var(--bridge-muted);opacity:.75} .bridge-input:focus,.bridge-select:focus{border-color:var(--bridge-label);box-shadow:var(--bridge-focus-ring)} .bridge-select{appearance:none;-webkit-appearance:none;padding-right:44px;cursor:pointer;background-color:var(--bridge-field);background-image:url('data:image/svg+xml;utf8,');background-repeat:no-repeat;background-position:right 20px center} [data-theme="dark"] .bridge-select{background-image:url('data:image/svg+xml;utf8,')} .bridge-form__error{grid-column:1/-1;display:flex;align-items:center;gap:10px;padding:12px 20px;border-radius:999px;background:rgba(248,122,97,.14);font-family:var(--font-ui);font-weight:500;font-size:13px;line-height:1.4;color:var(--bridge-head)} .bridge-form__actions{display:flex;align-items:flex-end;justify-content:stretch} /* Success state: chip + upright gradient headline + value rail. */ .bridge-confirm{animation:bridgeRise 420ms var(--bridge-ease) both} .bridge-confirm__check{width:22px;height:22px;border-radius:50%;background:var(--bridge-aqua);display:grid;place-items:center} .bridge-rail{display:flex;flex-wrap:wrap;background:var(--bridge-paper-2);border-radius:16px;border:1px solid var(--bridge-hair)} .bridge-rail__cell{padding:16px 26px} .bridge-rail__div{width:1px;background:var(--bridge-hair);margin:14px 0} /* Links follow the label token, hover to coral. Buttons keep their own ink. */ .bridge-web a:not(.bridge-btn):not(.bridge-cta){color:var(--bridge-label);text-decoration:none} .bridge-web a:not(.bridge-btn):not(.bridge-cta):hover{color:var(--aytm-coral,#F87A61)} .bridge-web a.bridge-btn,.bridge-web a.bridge-btn:hover,.bridge-web a.bridge-cta,.bridge-web a.bridge-cta:hover{color:#fff} .bridge-web a.bridge-btn--ghost,.bridge-web a.bridge-btn--ghost:hover{color:var(--bridge-head)}