/* ========================================================================== Vesuvius Sports — shared stylesheet Design tokens mirror the tailwind.config in each page's . ========================================================================== */ :root { /* Core palette — pulled from the Vesuvius Sports mark (warm amber → orange → burnt umber) */ --ink: #16120e; /* near-black warm base, hero/footer bg */ --ink-soft: #221b14; /* raised dark surface (cards on dark bg) */ --ink-line: #3a2f22; /* borders/dividers on dark surfaces */ --paper: #fbf7f1; /* warm off-white, light section bg */ --paper-raised: #ffffff; /* card bg on light sections */ --paper-line: #e8ddcd; /* borders/dividers on light surfaces */ --text-dark: #1c150e; /* body text on light bg */ --text-muted: #6b5d4d; /* secondary text on light bg */ --text-on-dark: #f4ede2; /* body text on dark bg */ --text-on-dark-muted: #b7a893; /* secondary text on dark bg */ --orange: #f0630f; /* primary CTA / accent */ --orange-dark: #c94a08; /* hover / pressed */ --amber: #f2a71b; /* secondary accent, gradients */ --umber: #7c2d12; /* deep accent from logo's darker ring */ --focus-ring: #f2a71b; --radius-sm: 6px; --radius-md: 12px; --radius-lg: 20px; --radius-pill: 999px; --shadow-card: 0 1px 2px rgba(28, 21, 14, 0.06), 0 8px 24px -8px rgba(28, 21, 14, 0.12); --shadow-lifted: 0 20px 45px -15px rgba(22, 18, 14, 0.35); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); } * { -webkit-tap-highlight-color: transparent; } html { scroll-behavior: smooth; } body { font-family: "Barlow", ui-sans-serif, system-ui, sans-serif; background: var(--paper); color: var(--text-dark); -webkit-font-smoothing: antialiased; } .font-display { font-family: "Barlow Condensed", ui-sans-serif, system-ui, sans-serif; } /* Respect reduced motion globally */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } /* Visible, on-brand focus ring for keyboard users */ a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible { outline: 2.5px solid var(--focus-ring); outline-offset: 3px; border-radius: var(--radius-sm); } /* Skip link */ .skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--orange); color: #fff; padding: 0.75rem 1.25rem; border-radius: 0 0 var(--radius-sm) 0; font-weight: 600; } .skip-link:focus { left: 0; } /* Cursor affordance on every clickable */ a, button, [role="button"], summary, label[for] { cursor: pointer; } input:disabled, button:disabled { cursor: not-allowed; } /* ---------------------------------------------------------------------- */ /* Reveal-on-scroll */ /* ---------------------------------------------------------------------- */ .reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out); will-change: opacity, transform; } .reveal.is-visible { opacity: 1; transform: translateY(0); } .reveal-stagger > * { opacity: 0; transform: translateY(18px); transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out); } .reveal-stagger.is-visible > * { opacity: 1; transform: translateY(0); } .reveal-stagger.is-visible > *:nth-child(1) { transition-delay: 0ms; } .reveal-stagger.is-visible > *:nth-child(2) { transition-delay: 60ms; } .reveal-stagger.is-visible > *:nth-child(3) { transition-delay: 120ms; } .reveal-stagger.is-visible > *:nth-child(4) { transition-delay: 180ms; } .reveal-stagger.is-visible > *:nth-child(5) { transition-delay: 240ms; } .reveal-stagger.is-visible > *:nth-child(6) { transition-delay: 300ms; } @media (prefers-reduced-motion: reduce) { .reveal, .reveal-stagger > * { opacity: 1; transform: none; } } /* ---------------------------------------------------------------------- */ /* Nav */ /* ---------------------------------------------------------------------- */ .site-header { background: rgba(22, 18, 14, 0.88); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .nav-link { position: relative; color: var(--text-on-dark-muted); transition: color 0.2s var(--ease-out); } .nav-link:hover, .nav-link.is-active { color: var(--text-on-dark); } .nav-link.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; background: var(--orange); border-radius: var(--radius-pill); } #mobile-menu { transition: max-height 0.35s var(--ease-out), opacity 0.25s var(--ease-out); max-height: 0; opacity: 0; overflow: hidden; } #mobile-menu.is-open { max-height: 480px; opacity: 1; } /* ---------------------------------------------------------------------- */ /* Buttons */ /* ---------------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; font-family: "Barlow Condensed", ui-sans-serif, sans-serif; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; border-radius: var(--radius-pill); padding: 0.9rem 1.9rem; font-size: 1.05rem; line-height: 1; transition: transform 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out), background-color 0.2s var(--ease-out), color 0.2s var(--ease-out); min-height: 44px; } .btn:active { transform: translateY(1px) scale(0.99); } .btn-primary { background: linear-gradient(135deg, var(--amber), var(--orange)); color: #1c0f04; box-shadow: 0 10px 24px -8px rgba(240, 99, 15, 0.55); } .btn-primary:hover { box-shadow: 0 14px 30px -8px rgba(240, 99, 15, 0.7); transform: translateY(-1px); } .btn-ghost-dark { background: transparent; border: 1.5px solid rgba(244, 237, 226, 0.35); color: var(--text-on-dark); } .btn-ghost-dark:hover { border-color: var(--text-on-dark); background: rgba(244, 237, 226, 0.08); } .btn-ghost-light { background: transparent; border: 1.5px solid var(--paper-line); color: var(--text-dark); } .btn-ghost-light:hover { border-color: var(--umber); background: rgba(124, 45, 18, 0.05); } .btn-block { width: 100%; } /* ---------------------------------------------------------------------- */ /* Cards & surfaces */ /* ---------------------------------------------------------------------- */ .card { background: var(--paper-raised); border: 1px solid var(--paper-line); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); } .card-dark { background: var(--ink-soft); border: 1px solid var(--ink-line); border-radius: var(--radius-lg); } .eyebrow { font-family: "Barlow Condensed", sans-serif; text-transform: uppercase; letter-spacing: 0.18em; font-weight: 600; font-size: 0.8rem; } /* Gradient text for key words in headlines */ .text-gradient { background: linear-gradient(135deg, var(--amber), var(--orange) 60%, var(--umber)); -webkit-background-clip: text; background-clip: text; color: transparent; } /* ---------------------------------------------------------------------- */ /* Hero media */ /* ---------------------------------------------------------------------- */ .hero-scrim { background: linear-gradient(180deg, rgba(15, 11, 7, 0.55) 0%, rgba(15, 11, 7, 0.72) 55%, rgba(15, 11, 7, 0.94) 100%), linear-gradient(90deg, rgba(15, 11, 7, 0.55) 0%, rgba(15, 11, 7, 0.15) 45%, rgba(15, 11, 7, 0.55) 100%); } .section-scrim-dark { background: linear-gradient(180deg, rgba(15, 11, 7, 0.86), rgba(15, 11, 7, 0.92)); } /* Decorative background image utility (object-position tunable per use) */ .bg-cover-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* ---------------------------------------------------------------------- */ /* Forms */ /* ---------------------------------------------------------------------- */ .field-label { display: block; font-weight: 600; font-size: 0.9rem; color: var(--text-dark); margin-bottom: 0.4rem; } .field-input, .field-textarea { width: 100%; min-height: 48px; border-radius: var(--radius-md); border: 1.5px solid var(--paper-line); background: var(--paper-raised); padding: 0.75rem 1rem; font-size: 1rem; color: var(--text-dark); transition: border-color 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out); } .field-textarea { min-height: 120px; resize: vertical; } .field-input:hover, .field-textarea:hover { border-color: #cdbfa7; } .field-input:focus, .field-textarea:focus { outline: none; border-color: var(--orange); box-shadow: 0 0 0 4px rgba(240, 99, 15, 0.15); } .field-input[aria-invalid="true"], .field-textarea[aria-invalid="true"] { border-color: #c0362c; box-shadow: 0 0 0 4px rgba(192, 54, 44, 0.12); } .field-error { display: none; align-items: center; gap: 0.35rem; color: #a6291f; font-size: 0.85rem; margin-top: 0.4rem; font-weight: 500; } .field-error.is-shown { display: flex; } .field-help { font-size: 0.85rem; color: var(--text-muted); margin-top: 0.35rem; } .field-required { color: var(--orange-dark); } .checkbox-row { display: flex; align-items: flex-start; gap: 0.75rem; } .checkbox-row input[type="checkbox"] { appearance: none; -webkit-appearance: none; width: 24px; height: 24px; min-width: 24px; border-radius: 6px; border: 1.5px solid var(--paper-line); background: var(--paper-raised); display: grid; place-content: center; transition: border-color 0.2s var(--ease-out), background-color 0.2s var(--ease-out); margin-top: 2px; } .checkbox-row input[type="checkbox"]::before { content: ""; width: 13px; height: 13px; transform: scale(0); transition: transform 0.15s var(--ease-out); box-shadow: inset 1em 1em white; clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%); } .checkbox-row input[type="checkbox"]:checked { background: var(--orange); border-color: var(--orange); } .checkbox-row input[type="checkbox"]:checked::before { transform: scale(1); } /* Password field with reveal toggle */ .password-field { position: relative; } .password-field .field-input { padding-right: 3rem; } .password-toggle { position: absolute; right: 0.5rem; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; display: grid; place-content: center; border-radius: var(--radius-sm); color: var(--text-muted); } .password-toggle:hover { color: var(--text-dark); background: rgba(28, 21, 14, 0.05); } /* Toast / status */ .form-status { display: none; border-radius: var(--radius-md); padding: 1rem 1.1rem; font-weight: 500; font-size: 0.95rem; align-items: flex-start; gap: 0.6rem; } .form-status.is-shown { display: flex; } .form-status-success { background: #eef7ee; color: #1e5b2c; border: 1px solid #bfe3c2; } .form-status-error { background: #fbecea; color: #8a2a20; border: 1px solid #f0c6c0; } /* Loading spinner for submit button */ .spinner { width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid rgba(28, 15, 4, 0.25); border-top-color: #1c0f04; animation: spin 0.7s linear infinite; display: none; } .is-loading .spinner { display: inline-block; } .is-loading .btn-label { opacity: 0.75; } @keyframes spin { to { transform: rotate(360deg); } } /* ---------------------------------------------------------------------- */ /* Numbered process steps */ /* ---------------------------------------------------------------------- */ .step-number { font-family: "Barlow Condensed", sans-serif; font-weight: 700; font-size: 3.25rem; line-height: 1; background: linear-gradient(135deg, var(--amber), var(--orange)); -webkit-background-clip: text; background-clip: text; color: transparent; } /* ---------------------------------------------------------------------- */ /* Password gate page */ /* ---------------------------------------------------------------------- */ .gate-wrap { min-height: 100dvh; display: grid; place-items: center; background: var(--ink); background-image: radial-gradient(60% 50% at 15% 10%, rgba(242, 167, 27, 0.16), transparent 60%), radial-gradient(50% 45% at 85% 90%, rgba(240, 99, 15, 0.14), transparent 60%); } /* ---------------------------------------------------------------------- */ /* Utility: container widths */ /* ---------------------------------------------------------------------- */ .container-page { width: 100%; max-width: 80rem; margin-inline: auto; padding-inline: 1.25rem; } @media (min-width: 640px) { .container-page { padding-inline: 2rem; } }