/* ============================================================ ATBMC — Advanced Training in Basic Medical Care Implementation of ATBMC.dc.html (Claude Design project "HTML Modernization Request"). The source prototype carried every rule as an inline style attribute. Those are consolidated here into tokens plus component classes; values are unchanged from the design. ============================================================ */ /* ── 1. Tokens ────────────────────────────────────────────── */ :root { /* Ink & surfaces */ --navy: #0d1b29; --navy-panel: #172838; --navy-hover: #1f3347; --navy-b: #132234; --navy-c: #0e1e30; /* Gold */ --gold: #c49a45; --gold-light: #ddb96a; --gold-pale: #f5edd8; --gold-line: rgba(196, 154, 69, .22); --gold-wash: rgba(196, 154, 69, .07); /* Cream */ --cream: #faf8f4; --cream-alt: #f2ede6; /* Text */ --text: #0d1b29; --text-body: #3d5166; --text-muted: #7a92a8; --text-faint: #aab8c4; --on-dark: rgba(255, 255, 255, .88); --on-dark-soft: rgba(255, 255, 255, .6); --on-dark-faint: rgba(255, 255, 255, .5); /* Lines */ --line-dark: rgba(13, 27, 41, .09); --line-card: rgba(13, 27, 41, .08); /* Status */ --status-open: #4caf7d; --status-filling: #e8a840; /* Type */ --font-serif: 'Playfair Display', Georgia, serif; --font-sans: 'Instrument Sans', system-ui, -apple-system, sans-serif; /* Metrics */ --nav-h: 104px; --gutter: 6%; --radius: 4px; --radius-sm: 2px; /* Motion — `moderate` on */ --reveal-dist: 20px; --reveal-time: .55s; } body[data-motion="moderate"] { --reveal-dist: 32px; } /* `showVectors` in the design gates the three purely decorative vectors — the hero ECG trace, the radar rings and the ECG divider band. The icons inside the curriculum list are content, not decoration, so they stay. Off via . */ body[data-vectors="off"] .hero__ecg, body[data-vectors="off"] .hero__figure, body[data-vectors="off"] .radar, body[data-vectors="off"] .ecg-divider { display: none; } /* ── 2. Reset & base ──────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: var(--nav-h); } body { margin: 0; font-family: var(--font-sans); font-weight: 400; background: var(--cream); color: var(--text); overflow-x: hidden; -webkit-font-smoothing: antialiased; } h1, h2, h3, p, dl, dd, dt, blockquote, figure { margin: 0; } ul, ol { margin: 0; padding: 0; list-style: none; } img, svg { display: block; max-width: 100%; } button { font: inherit; color: inherit; } :focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; } .skip-link { position: absolute; left: -9999px; top: 0; z-index: 500; background: var(--gold); color: var(--navy); padding: .75rem 1.25rem; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; } .skip-link:focus { left: 1rem; top: 1rem; } .link-gold { color: var(--gold); text-decoration: none; } .link-gold:hover { text-decoration: underline; } /* ── 3. Keyframes ─────────────────────────────────────────── */ @keyframes fadeUp { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } } @keyframes softPulse{ 0%, 100% { opacity: .55; } 50% { opacity: 1; } } @keyframes ecgTrace { from { stroke-dashoffset: 2800; } to { stroke-dashoffset: 0; } } @keyframes slowSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* Paired with pathLength="1", so the offset is a fraction of any path. */ @keyframes traceIn { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } } @keyframes heartBeat{ 0%, 100% { transform: scale(1); } 50% { transform: scale(1.035); } } /* ── 4. Buttons ───────────────────────────────────────────── */ .btn { display: inline-block; font-family: var(--font-sans); font-size: .82rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; text-align: center; padding: .95rem 2.2rem; border: none; border-radius: var(--radius-sm); cursor: pointer; transition: background .2s, color .2s, border-color .2s, transform .15s; } .btn--gold { background: var(--gold); color: var(--navy); } .btn--gold:hover { background: var(--gold-light); transform: translateY(-1px); } .btn--ghost { background: transparent; color: rgba(255,255,255,.75); border: 1px solid rgba(255,255,255,.2); } .btn--ghost:hover { border-color: var(--gold); color: var(--gold-light); } .btn--dark { background: var(--navy); color: var(--gold-light); } .btn--dark:hover { background: var(--gold); color: var(--navy); } .btn--navy { background: var(--navy); color: var(--gold-light); letter-spacing: .09em; padding: 1rem 2.4rem; } .btn--navy:hover { background: var(--navy-hover); } .btn--sm { font-size: .75rem; letter-spacing: .09em; padding: .65rem 1.4rem; } .btn--block { display: block; width: 100%; } /* ── 5. Navigation ────────────────────────────────────────── */ .site-nav { position: fixed; inset: 0 0 auto 0; z-index: 200; height: var(--nav-h); display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 0 var(--gutter); background: rgba(13, 27, 41, .96); backdrop-filter: blur(14px); border-bottom: 1px solid var(--gold-line); } /* The lockup is very wide (2800×520), so it is the first thing to overflow the bar on narrow screens — let it shrink rather than push the nav wider than the viewport. */ .site-nav__logo { display: flex; align-items: center; min-width: 0; } .site-nav__logo img { height: 74px; width: auto; max-width: 100%; object-fit: contain; object-position: left center; } .site-nav__links { display: flex; align-items: center; gap: 1.4rem; flex-wrap: nowrap; } .site-nav__link { font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--on-dark-soft); text-decoration: none; white-space: nowrap; transition: color .2s; } .site-nav__link:hover { color: var(--gold-light); } .nav-toggle { display: none; width: 44px; height: 44px; flex-direction: column; align-items: center; justify-content: center; gap: 5px; background: none; border: 1px solid var(--gold-line); border-radius: var(--radius-sm); cursor: pointer; } .nav-toggle__bar { width: 18px; height: 1.5px; background: var(--gold-light); transition: transform .25s, opacity .2s; } .nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { transform: translateY(6.5px) rotate(45deg); } .nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; } .nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); } /* ── 6. Section scaffolding ───────────────────────────────── */ /* Note on the auto-fit grids below: the minimum track is wrapped in min(Npx, 100%). A bare minmax(Npx, 1fr) floor cannot shrink, so on a viewport narrower than N the track overflows its container — the source design overflowed this way below ~400px. */ .section { padding: 7rem var(--gutter); } .section--tight { padding: 4rem var(--gutter); } .section--cream { background: var(--cream); } .section--cream-alt { background: var(--cream-alt); } .section--dark { background: var(--navy); } .section--clip { position: relative; overflow: hidden; } .section-head { margin-bottom: 4rem; } .section--tight .section-head { margin-bottom: 1.5rem; } .eyebrow { font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); margin-bottom: .7rem; } .eyebrow--center { text-align: center; } .section-title { font-family: var(--font-serif); font-size: clamp(2rem, 3.2vw, 3rem); font-weight: 400; line-height: 1.18; color: var(--text); margin-bottom: 1.2rem; } .section-title--light { color: #fff; } .section-title--center { text-align: center; margin-bottom: 0; } .section-title--sm { font-size: clamp(1.8rem, 3vw, 2.6rem); line-height: 1.15; } .em-gold { font-style: italic; color: var(--gold); } .em-gold-light { font-style: italic; color: var(--gold-light); } .prose { font-size: .95rem; line-height: 1.78; color: var(--text-body); max-width: 560px; } .prose + .prose { margin-top: 1rem; } .prose--light { color: var(--on-dark-faint); } .split { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: 5rem; align-items: start; margin-top: 2rem; } .split--center { align-items: center; } .split--wide { grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr)); margin-top: 3rem; } /* Hairline grid — the divider pattern used throughout the design. The source drew it as 1px grid gaps over a line-coloured container background; auto-fit rows that don't fill leak that colour as a solid block. Drawing the lines per cell instead (container owns top+left, each cell owns right+bottom) keeps single-width rules everywhere and leaves unfilled tracks genuinely empty. */ .tiles { display: grid; gap: 0; border-radius: var(--radius); overflow: hidden; } .tiles--light { border-top: 1px solid var(--line-dark); border-left: 1px solid var(--line-dark); } .tiles--light > * { border-right: 1px solid var(--line-dark); border-bottom: 1px solid var(--line-dark); } .tiles--dark { border-top: 1px solid var(--gold-line); border-left: 1px solid var(--gold-line); } .tiles--dark > * { border-right: 1px solid var(--gold-line); border-bottom: 1px solid var(--gold-line); } .plus { font-size: 2rem; color: rgba(196, 154, 69, .3); } .plus--lg { font-size: 2.5rem; color: rgba(196, 154, 69, .25); margin-bottom: 1rem; } /* ── 7. Hero ──────────────────────────────────────────────── */ .hero { position: relative; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; padding: 10rem var(--gutter) 6rem; background: var(--navy); overflow: hidden; } .hero__grid-overlay { position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(196,154,69,.03) 1px, transparent 1px), linear-gradient(90deg, rgba(196,154,69,.03) 1px, transparent 1px); background-size: 72px 72px; } .hero__glow { position: absolute; top: -15%; right: -10%; width: 70vw; height: 70vw; pointer-events: none; background: radial-gradient(ellipse, rgba(196,154,69,.07) 0%, transparent 65%); } .hero__inner { position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: 4rem; align-items: center; } .hero__col { flex: 1 1 480px; max-width: 760px; } .badge { display: inline-flex; align-items: center; gap: .7rem; border: 1px solid var(--gold-line); padding: .4rem 1rem; border-radius: var(--radius-sm); font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); margin-bottom: 2.2rem; animation: fadeUp .6s ease both; } .badge__dot { width: 5px; height: 5px; border-radius: 50%; background: var(--gold); animation: softPulse 2.4s ease infinite; } .hero__title { font-family: var(--font-serif); font-size: clamp(2.6rem, 5vw, 5rem); font-weight: 400; line-height: 1.1; color: #fff; margin-bottom: 1.6rem; animation: fadeUp .7s .1s ease both; } .hero__lead { font-size: 1.05rem; line-height: 1.75; color: rgba(255,255,255,.55); max-width: 540px; margin-bottom: 3rem; animation: fadeUp .7s .22s ease both; } .hero__actions { display: flex; gap: 1rem; flex-wrap: wrap; animation: fadeUp .7s .35s ease both; } .stat-strip { display: flex; flex-wrap: wrap; width: fit-content; margin-top: 4rem; border: 1px solid var(--gold-line); border-radius: 3px; overflow: hidden; animation: fadeUp .8s .5s ease both; } .stat { padding: 1.4rem 2.2rem; text-align: center; border-right: 1px solid var(--gold-line); } .stat:last-child { border-right: none; } .stat__num { font-family: var(--font-serif); font-size: 2rem; font-weight: 500; color: var(--gold-light); line-height: 1; } .stat__label { font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); margin-top: .35rem; } .hero__ecg { position: absolute; left: 0; bottom: 0; z-index: 1; width: 100%; height: 150px; color: var(--gold); opacity: .4; pointer-events: none; } .hero__ecg path { stroke-dasharray: 2800; animation: ecgTrace 4.5s .6s ease-out both; } /* Vitals dial — second hero column. Joins the hero's fadeUp stagger after the stat strip (.5s), so it lands last. */ .hero__figure { position: relative; z-index: 2; flex: 0 1 420px; max-width: 420px; animation: fadeUp .9s .62s ease both; } .dial { display: block; width: 100%; height: auto; overflow: visible; } /* Listed rather than a blanket `.dial circle` reset: that would outrank the single-class rules below and blank out the gradient glow and the node. */ .dial__bezel, .dial__sweep, .dial__track, .dial__progress, .dial__trace, .dial__heart { fill: none; } .dial__bezel { stroke: rgba(196,154,69,.34); stroke-width: 2; stroke-linecap: round; } .dial__sweep { stroke: rgba(221,185,106,.4); stroke-width: 1.2; stroke-linecap: round; transform-origin: 220px 220px; animation: slowSpin 66s linear infinite; } .dial__track { stroke: var(--gold-line); stroke-width: 1.4; } /* pathLength="1" normalises the dash maths, so one keyframe drives any path regardless of its real length — no per-path magic numbers. */ .dial__progress, .dial__trace { stroke-dasharray: 1; stroke-linecap: round; stroke-linejoin: round; } .dial__progress { stroke: var(--gold-light); stroke-width: 2.4; animation: traceIn 1.6s .75s cubic-bezier(.22,.61,.36,1) both; } .dial__trace { stroke: var(--gold); stroke-width: 1.6; animation: traceIn 1.9s 1.5s ease-out both; } .dial__node { fill: var(--gold-light); animation: softPulse 2.4s 2.3s ease infinite; } .dial__heart { stroke: var(--gold-light); stroke-width: 1.8; stroke-linejoin: round; transform-origin: 220px 203px; animation: heartBeat 2.8s 2.3s ease-in-out infinite; } /* ── 8. What will you learn ───────────────────────────────── */ .learn-list { grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); } .learn-item { display: flex; align-items: flex-start; gap: .8rem; background: #fff; padding: 1.4rem 1.5rem; font-size: .87rem; line-height: 1.5; color: var(--text-body); } .learn-item__icon { display: inline-flex; min-width: 18px; color: var(--gold); } .learn-item__icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } /* ── 9. Program includes ──────────────────────────────────── */ .radar { position: absolute; top: -40px; right: -40px; width: 340px; height: 340px; opacity: .22; pointer-events: none; } .radar__sweep { transform-origin: 100px 100px; animation: slowSpin 44s linear infinite; } .include-grid { grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); margin-top: 3rem; } .include-card { background: var(--navy-panel); padding: 2.2rem 1.8rem; } .include-card__num { font-family: var(--font-serif); font-size: 2rem; color: var(--gold-light); margin-bottom: .6rem; } .include-card__label { font-size: .85rem; line-height: 1.5; color: rgba(255,255,255,.75); } /* ── 10. About ────────────────────────────────────────────── */ .feature-list { display: flex; flex-direction: column; margin-top: 3rem; } .feature { display: flex; gap: 1.4rem; align-items: flex-start; padding: 1.6rem 0; border-bottom: 1px solid var(--line-dark); } .feature:first-child { border-top: 1px solid var(--line-dark); } .feature__icon { flex: 0 0 40px; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--gold-line); background: var(--gold-pale); border-radius: 50%; } .feature__icon svg { width: 17px; height: 17px; fill: none; stroke: var(--gold); stroke-width: 1.7; } .feature__title { display: block; font-size: .9rem; font-weight: 500; color: var(--text); margin-bottom: .25rem; } .feature__desc { font-size: .83rem; line-height: 1.55; color: var(--text-muted); } .quote-card { position: relative; overflow: hidden; background: var(--navy); border-radius: var(--radius); padding: 3.5rem; } .quote-card__glow { position: absolute; top: -60px; right: -60px; width: 220px; height: 220px; pointer-events: none; background: radial-gradient(circle, rgba(196,154,69,.13) 0%, transparent 70%); } .quote-card__quote { position: relative; z-index: 1; font-family: var(--font-serif); font-size: 1.45rem; font-style: italic; font-weight: 400; line-height: 1.6; color: var(--on-dark); margin-bottom: 2.5rem; } .quote-card__quote::before { content: '\201C'; position: absolute; top: -1rem; left: -.8rem; font-family: var(--font-serif); font-size: 6rem; line-height: .8; color: var(--gold); opacity: .22; } .quote-card__stats { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 2.5rem; } .qstat__num { font-family: var(--font-serif); font-size: 2.6rem; font-weight: 500; color: var(--gold-light); line-height: 1; } .qstat__label { font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); margin-top: .3rem; } /* ── 11. Faculty ──────────────────────────────────────────── */ .faculty-grid { grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); } .faculty-card { position: relative; background: var(--navy-panel); padding: 2.2rem 1.8rem; transition: background .25s; } .faculty-card:hover { background: var(--navy-hover); } .faculty-card__tag { position: absolute; top: 1.4rem; right: 1.4rem; background: rgba(196,154,69,.1); border: 1px solid var(--gold-line); color: var(--gold); font-size: .6rem; letter-spacing: .08em; text-transform: uppercase; padding: .2rem .55rem; border-radius: var(--radius-sm); } /* Stand-in for the design's drop-an-image faculty portrait slot. */ .avatar { display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; margin-bottom: 1.3rem; border: 1px solid var(--gold-line); border-radius: 50%; background: rgba(196,154,69,.06); } .avatar svg { width: 30px; height: 30px; fill: none; stroke: rgba(196,154,69,.55); stroke-width: 1.4; stroke-linecap: round; } .faculty-card__name { font-family: var(--font-serif); font-size: 1rem; font-weight: 500; color: #fff; margin-bottom: .25rem; } .faculty-card__cred { font-size: .72rem; letter-spacing: .06em; color: var(--gold); margin-bottom: .65rem; } .faculty-card__spec { font-size: .78rem; line-height: 1.5; color: var(--text-muted); } .tiles--dark > .faculty-card--more { border: 1px dashed rgba(196, 154, 69, .2); } .faculty-card--more { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6rem; text-align: center; background: rgba(196,154,69,.04); border: 1px dashed rgba(196,154,69,.2); font-size: .8rem; line-height: 1.5; color: var(--text-muted); } .faculty-card--more:hover { background: rgba(196,154,69,.04); } /* ── 12. Course detail ────────────────────────────────────── */ .topic-list { grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); border-radius: 3px; margin: 0 0 2.5rem; } .topic { display: flex; align-items: flex-start; gap: .7rem; background: var(--navy-panel); padding: 1rem 1.2rem; font-size: .82rem; line-height: 1.45; color: rgba(255,255,255,.7); } .topic__dot { flex: 0 0 6px; width: 6px; height: 6px; margin-top: .35rem; border-radius: 50%; background: var(--gold); } .spec-grid { grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr)); border-radius: 3px; } .spec { background: var(--navy-panel); padding: 1.4rem 1.2rem; text-align: center; } .spec__num { font-family: var(--font-serif); font-size: 1.6rem; color: var(--gold-light); } .spec__label { font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); margin-top: .25rem; } .panel { background: rgba(255,255,255,.03); border: 1px solid var(--gold-line); border-radius: 3px; padding: 2rem; margin-bottom: 2rem; } .panel--tight { padding: 1.5rem; } .panel__title { font-family: var(--font-serif); font-size: 1.05rem; font-weight: 400; color: #fff; margin-bottom: 1.2rem; } .panel--tight .panel__title { font-size: 1rem; margin-bottom: 1rem; } .bullet-list { display: flex; flex-direction: column; gap: .6rem; } .bullet { display: flex; align-items: center; gap: .7rem; font-size: .82rem; color: var(--on-dark-soft); } .bullet__dot { flex: 0 0 5px; width: 5px; height: 5px; border-radius: 50%; background: var(--gold); } .fee-table { background: rgba(255,255,255,.03); border: 1px solid var(--gold-line); border-radius: 3px; overflow: hidden; margin-bottom: 2rem; } .fee-row { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .5rem; padding: 1rem 1.5rem; border-bottom: 1px solid var(--gold-line); } .fee-row:last-child { border-bottom: none; } .fee-row__label { font-size: .8rem; color: var(--on-dark-faint); } .fee-row__hint { font-size: .68rem; color: var(--text-muted); } .fee-row__amount { font-family: var(--font-serif); font-size: 1.3rem; color: var(--gold-light); } .detail-table { display: flex; flex-direction: column; } .detail-row { display: flex; justify-content: space-between; gap: 1rem; padding: .55rem 0; font-size: .8rem; border-bottom: 1px solid rgba(255,255,255,.05); } .detail-row:last-child { border-bottom: none; } .detail-row__key { color: var(--text-muted); } .detail-row__val { color: rgba(255,255,255,.8); text-align: right; } /* ── 13. Testimonials ─────────────────────────────────────── */ .carousel { position: relative; max-width: 720px; margin: 3rem auto 0; } .carousel__viewport { overflow: hidden; border-radius: 6px; } .carousel__track { display: flex; transition: transform .5s cubic-bezier(.22, .61, .36, 1); } .testimonial { flex: 0 0 100%; background: #fff; border: 1px solid var(--line-card); border-radius: 6px; padding: 3rem; } .testimonial__quote { font-family: var(--font-serif); font-size: 1.25rem; font-style: italic; line-height: 1.6; color: var(--navy-panel); margin-bottom: 1.6rem; } .testimonial__quote::before { content: '\201C'; display: block; font-family: var(--font-serif); font-size: 4rem; line-height: .6; color: var(--gold); opacity: .25; margin-bottom: 1rem; } .testimonial__name { font-size: .9rem; font-weight: 500; color: var(--text); } .testimonial__role { font-size: .78rem; color: var(--text-muted); margin-top: .15rem; } .carousel__controls { display: flex; justify-content: center; align-items: center; gap: 1.5rem; margin-top: 2rem; } .carousel__btn { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(13,27,41,.15); background: #fff; color: var(--text); cursor: pointer; transition: border-color .2s, color .2s; } .carousel__btn:hover { border-color: var(--gold); color: var(--gold); } .carousel__btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; } .carousel__dots { display: flex; gap: .5rem; } .carousel__dot { width: 8px; height: 8px; padding: 0; border: none; border-radius: 50%; background: rgba(196,154,69,.3); cursor: pointer; transition: background .2s; } .carousel__dot[aria-selected="true"] { background: var(--gold); } /* ── 14. Upcoming batches ─────────────────────────────────── */ .city-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 1.5rem; } .city-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line-card); border-radius: var(--radius); overflow: hidden; transition: box-shadow .25s; } .city-card:hover { box-shadow: 0 16px 40px rgba(13,27,41,.1); } .city-card__head { background: var(--navy); padding: 1.8rem 2rem 1.4rem; } .city-card__head--b { background: var(--navy-b); } .city-card__head--c { background: var(--navy-c); } .city-status { display: inline-flex; align-items: center; gap: .45rem; font-size: .65rem; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 1rem; } .city-status__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .city-status--open { color: var(--status-open); } .city-status--filling { color: var(--status-filling); } .city-card__name { font-family: var(--font-serif); font-size: 1.6rem; font-weight: 400; color: #fff; margin-bottom: .3rem; } .city-card__date { display: flex; align-items: center; gap: .5rem; font-size: .8rem; color: var(--on-dark-soft); } .city-card__date svg { flex: 0 0 12px; width: 12px; height: 12px; fill: none; stroke: var(--gold); stroke-width: 1.8; } .city-card__body { flex: 1; display: flex; flex-direction: column; padding: 1.6rem 2rem; } .seat-row { display: flex; flex-wrap: wrap; gap: 1.5rem; margin-bottom: 1.5rem; padding-bottom: 1.5rem; border-bottom: 1px solid rgba(13,27,41,.07); } .seat__num { font-family: var(--font-serif); font-size: 1.4rem; color: var(--text); } .seat__label { font-size: .65rem; letter-spacing: .09em; text-transform: uppercase; color: var(--text-muted); margin-top: .1rem; } .city-venue { display: flex; align-items: flex-start; gap: .5rem; font-size: .8rem; color: var(--text-muted); margin-bottom: 1.5rem; } .city-venue svg { flex: 0 0 13px; width: 13px; height: 13px; margin-top: .15rem; fill: none; stroke: var(--gold); stroke-width: 1.8; } .city-card__foot { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; margin-top: auto; padding-top: 1.2rem; border-top: 1px solid rgba(13,27,41,.07); } .city-price { font-family: var(--font-serif); font-size: 1.4rem; color: var(--text); } .city-price__note { font-size: .68rem; color: var(--text-muted); } .city-card--soon { align-items: center; justify-content: center; min-height: 240px; padding: 2.5rem; text-align: center; background: transparent; border: 1.5px dashed rgba(13,27,41,.15); } .city-card--soon:hover { box-shadow: none; } .city-card__soon-title { font-family: var(--font-serif); font-size: 1.1rem; color: var(--text-muted); margin-bottom: .5rem; } .city-card__soon-list { font-size: .8rem; line-height: 1.8; color: var(--text-faint); } /* ── 15. ECG divider ──────────────────────────────────────── */ .ecg-divider { background: var(--cream); padding: 2.5rem var(--gutter) 0; color: var(--gold); } /* display:block — an inline SVG would leave a descender gap under the trace. */ .ecg-divider svg { display: block; width: 100%; height: 40px; opacity: .45; } /* ── 16. FAQ ──────────────────────────────────────────────── */ .faq { max-width: 760px; margin-top: 2.5rem; } .faq__item { border-bottom: 1px solid var(--line-dark); } .faq__q { display: flex; justify-content: space-between; align-items: center; gap: 1rem; width: 100%; padding: 1.4rem 0; background: none; border: none; text-align: left; cursor: pointer; } .faq__q-text { font-size: 1rem; font-weight: 500; color: var(--text); transition: color .2s; } .faq__q[aria-expanded="true"] .faq__q-text { color: var(--gold); } .faq__icon { display: inline-flex; min-width: 20px; color: var(--gold); transition: transform .3s ease; } .faq__q[aria-expanded="true"] .faq__icon { transform: rotate(135deg); } .faq__icon svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; } /* grid-template-rows 0fr→1fr animates an auto-height panel. */ .faq__a-wrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s ease; } .faq__item.is-open .faq__a-wrap { grid-template-rows: 1fr; } .faq__a-wrap > div { overflow: hidden; } .faq__a { font-size: .88rem; line-height: 1.7; color: var(--text-body); max-width: 640px; margin-bottom: 1.4rem; } /* ── 17. Why ATBMC ────────────────────────────────────────── */ .why-grid { grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); margin-top: 3rem; } .why-card { background: var(--navy-panel); padding: 2.5rem 2rem; transition: background .2s; } .why-card:hover { background: var(--navy-hover); } .why-card__num { font-family: var(--font-serif); font-size: 3rem; font-weight: 400; line-height: 1; color: rgba(196,154,69,.2); margin-bottom: 1.2rem; } .why-card__title { font-family: var(--font-serif); font-size: 1.05rem; font-weight: 400; color: #fff; margin-bottom: .6rem; } .why-card__desc { font-size: .8rem; line-height: 1.6; color: var(--text-muted); } /* ── 18. CTA band ─────────────────────────────────────────── */ .cta-band { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 2rem; background: var(--gold); padding: 4rem var(--gutter); } .cta-band__title { font-family: var(--font-serif); font-size: clamp(1.6rem, 2.5vw, 2.2rem); font-weight: 400; color: var(--navy); } .cta-band__title em { font-style: italic; } /* ── 19. Footer ───────────────────────────────────────────── */ .site-footer { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1.5rem; background: var(--navy); border-top: 1px solid var(--gold-line); padding: 3rem var(--gutter); } .site-footer__logo { height: 64px; width: auto; } .site-footer__meta { font-size: .75rem; color: var(--text-muted); } /* ── 20. Registration modal ───────────────────────────────── */ .modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 2rem; background: rgba(5, 12, 20, .85); backdrop-filter: blur(6px); opacity: 0; transition: opacity .3s; } .modal[hidden] { display: none; } .modal.is-open { opacity: 1; } .modal__dialog { position: relative; width: 100%; max-width: 680px; max-height: 90vh; overflow-y: auto; background: var(--navy-panel); border: 1px solid var(--gold-line); border-radius: 6px; transform: translateY(20px); transition: transform .3s; } .modal.is-open .modal__dialog { transform: none; } .modal__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; background: var(--navy); border-bottom: 1px solid var(--gold-line); padding: 2rem 2.5rem; } .modal__date { font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); margin-bottom: .4rem; } .modal__title { font-family: var(--font-serif); font-size: 1.3rem; font-weight: 400; color: #fff; } .modal__close { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; background: none; border: 1px solid rgba(255,255,255,.15); border-radius: 50%; color: var(--on-dark-soft); font-size: 1.1rem; cursor: pointer; transition: border-color .2s, color .2s; } .modal__close:hover { border-color: var(--gold); color: var(--gold); } .modal__body { padding: 2.5rem; } .role-toggle { display: flex; border: 1px solid var(--gold-line); border-radius: 3px; overflow: hidden; margin-bottom: 2rem; } .role-toggle__btn { flex: 1; font-family: var(--font-sans); font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; padding: .8rem; background: transparent; border: none; color: var(--on-dark-faint); cursor: pointer; transition: background .2s, color .2s; } .role-toggle__btn.is-active { background: var(--gold); color: var(--navy); font-weight: 500; } .fee-summary { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; background: var(--gold-wash); border: 1px solid var(--gold-line); border-radius: 3px; padding: 1.2rem 1.5rem; margin-bottom: 2rem; } .fee-summary__item { text-align: center; } .fee-summary__num { font-family: var(--font-serif); font-size: 1.5rem; color: var(--gold-light); } .fee-summary__label { font-size: .65rem; letter-spacing: .09em; text-transform: uppercase; color: var(--text-muted); margin-top: .2rem; } .fee-summary__sep { width: 1px; align-self: stretch; background: var(--gold-line); } .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; margin-bottom: 1.5rem; } .field--full { grid-column: 1 / -1; } .field__label { display: block; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); margin-bottom: .45rem; } .field__input { width: 100%; background: rgba(255,255,255,.05); border: 1px solid rgba(196,154,69,.2); border-radius: var(--radius-sm); padding: .75rem 1rem; font-family: var(--font-sans); font-size: .88rem; color: #fff; outline: none; transition: border-color .2s; } .field__input::placeholder { color: rgba(255,255,255,.3); } .field__input:focus { border-color: var(--gold); } .field__input:user-invalid { border-color: #e07a63; } select.field__input option { background: var(--navy); } .payment-note { font-size: .75rem; line-height: 1.6; color: rgba(255,255,255,.35); background: rgba(255,255,255,.03); border-left: 2px solid var(--gold); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; padding: 1rem; margin-bottom: 1.5rem; } .reg-done { text-align: center; } .reg-done__icon { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; margin-bottom: 1.4rem; border: 1px solid var(--gold-line); border-radius: 50%; background: var(--gold-wash); } .reg-done__icon svg { width: 24px; height: 24px; fill: none; stroke: var(--gold-light); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .reg-done__title { font-family: var(--font-serif); font-size: 1.3rem; font-weight: 400; color: #fff; margin-bottom: .8rem; } .reg-done__body { font-size: .85rem; line-height: 1.7; color: var(--on-dark-faint); max-width: 30rem; margin: 0 auto 2rem; } /* ── 21. Scroll reveal ────────────────────────────────────── */ /* The hidden start state is armed by app.js (`reveal-ready` on ) only once it knows it can undo it. Gating it that way means a JS failure, a missing IntersectionObserver, or an observer that never delivers leaves the content plainly visible instead of blank. */ .reveal-ready [data-reveal] { opacity: 0; transform: translateY(var(--reveal-dist)); transition: opacity var(--reveal-time) ease, transform var(--reveal-time) ease; } .reveal-ready [data-reveal].is-visible { opacity: 1; transform: none; } /* ── 22. Responsive ───────────────────────────────────────── */ @media (max-width: 1180px) { :root { --nav-h: 88px; } .site-nav__logo img { height: 58px; } .nav-toggle { display: flex; } .site-nav__links { position: absolute; inset: 100% 0 auto 0; flex-direction: column; align-items: stretch; gap: 0; padding: .5rem var(--gutter) 1.5rem; background: rgba(13, 27, 41, .98); backdrop-filter: blur(14px); border-bottom: 1px solid var(--gold-line); display: none; } .site-nav__links.is-open { display: flex; } .site-nav__links li { border-top: 1px solid rgba(196,154,69,.12); } .site-nav__link { display: block; padding: 1rem 0; font-size: .8rem; } .site-nav__links .btn { margin-top: 1rem; } /* The text column (480px) plus the dial (420px) and their 4rem gap need ~1095px of content box. Below that the dial wraps under the copy and adds 420px to an already 100vh hero, so drop it instead. */ .hero__figure { display: none; } } @media (max-width: 900px) { :root { --gutter: 7%; } .site-nav__logo img { height: 50px; } .section { padding: 4.5rem var(--gutter); } .section--tight { padding: 3.5rem var(--gutter); } .hero { padding: 8rem var(--gutter) 5rem; } .split, .split--wide { gap: 3rem; margin-top: 1.5rem; } .quote-card { padding: 2.5rem; } .testimonial { padding: 2rem; } .modal__head { padding: 1.5rem; } .modal__body { padding: 1.5rem; } } @media (max-width: 620px) { :root { --gutter: 6%; } .site-nav { gap: .75rem; } .site-nav__logo img { height: 40px; } .stat-strip { width: 100%; } .stat { flex: 1 1 50%; padding: 1.2rem 1rem; border-bottom: 1px solid var(--gold-line); } .stat:nth-child(even) { border-right: none; } .stat:nth-last-child(-n+2) { border-bottom: none; } .hero__actions .btn { flex: 1 1 100%; } .quote-card__stats { gap: 1.5rem; } .form-grid { grid-template-columns: 1fr; } .fee-summary__sep { display: none; } .modal { padding: 0; align-items: stretch; } .modal__dialog { max-height: 100vh; border-radius: 0; border: none; } .cta-band, .site-footer { text-align: center; justify-content: center; } } /* ── 23. Reduced motion ───────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } [data-reveal] { opacity: 1; transform: none; } }