/* ========================================================================== rootsLegal — custom styles Tailwind (CDN) handles layout/utilities; this file holds what Tailwind can't express: brand tokens, scroll-reveal animation, scrollbar polish. ========================================================================== */ :root { /* Brand palette */ --c-navy: #002D5D; /* Pantone 648 C — CMYK 100 83 39 31 */ --c-indigo: #4338CA; /* Pantone 2736 C — CMYK 87 78 00 00 */ --c-cyan: #00ABC8; /* Pantone 3125 C — CMYK 91 00 21 00 */ --c-mint: #00A887; /* Pantone Green C — CMYK 100 00 60 00 */ --c-gold: #F9BE14; /* Pantone 7408 C — CMYK 02 27 97 00 */ --c-cream: #F6F8FB; } html { -webkit-text-size-adjust: 100%; } body { text-rendering: optimizeLegibility; } /* Selection + focus ------------------------------------------------------- */ ::selection { background: var(--c-cyan); color: #fff; } :where(a, button, input, [tabindex]):focus-visible { outline: 2px solid var(--c-cyan); outline-offset: 2px; border-radius: 4px; } /* Material icon baseline fix --------------------------------------------- */ .material-icons-round { line-height: 1; vertical-align: middle; } /* Hide scrollbar on the exam-chip rail ------------------------------------ */ .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; } .no-scrollbar::-webkit-scrollbar { display: none; } /* Page scrollbar ---------------------------------------------------------- */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: var(--c-navy); } ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.5); border-radius: 999px; } ::-webkit-scrollbar-thumb:hover { background: var(--c-cyan); } /* Scroll reveal ----------------------------------------------------------- */ .reveal { opacity: 0; transform: translateY(18px); transition: opacity .55s ease, transform .55s cubic-bezier(.22, 1, .36, 1); transition-delay: var(--d, 0ms); will-change: opacity, transform; } .reveal.is-visible { opacity: 1; transform: none; } /* Hero photo — soft fade at the bottom edge into the background ----------- */ .hero-photo-fade-bottom { -webkit-mask-image: linear-gradient(to bottom, #000 78%, rgba(0, 0, 0, .5) 90%, transparent 100%); mask-image: linear-gradient(to bottom, #000 78%, rgba(0, 0, 0, .5) 90%, transparent 100%); } /* WhatsApp FAB sizing (no Tailwind step for 3.25rem) ---------------------- */ .w-13 { width: 3.25rem; } .h-13 { height: 3.25rem; } /* Respect reduced motion -------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; } * { animation-duration: .01ms !important; transition-duration: .01ms !important; } } /* ========================================================================== Homepage sections — overlays, accordion, scroll-spy What Tailwind can't express for the faculty modal, the events lightbox, the marketplace modal + cart drawer, the FAQ accordion and the nav scroll-spy. Everything below is driven by classes the JS toggles. ========================================================================== */ /* Body scroll lock while an overlay is open ------------------------------- */ /* JS also sets document.body.style.overflow; this class carries the extras. */ body.is-locked { overflow: hidden; overscroll-behavior: none; } /* Overlay + panel entrance ------------------------------------------------ */ #faculty-modal:not(.hidden), #product-modal:not(.hidden), #gallery-lightbox:not(.hidden), #cart-backdrop:not(.hidden) { animation: overlay-in .18s ease-out both; } #faculty-modal:not(.hidden) #faculty-modal-panel, #product-modal:not(.hidden) [role="dialog"], #gallery-lightbox:not(.hidden) figure { animation: panel-in .26s cubic-bezier(.22, 1, .36, 1) both; } @keyframes overlay-in { from { opacity: 0; } to { opacity: 1; } } @keyframes panel-in { from { opacity: 0; transform: translateY(12px) scale(.985); } to { opacity: 1; transform: none; } } /* Cart drawer ------------------------------------------------------------- The slide itself is Tailwind (translate-x-full + transition-transform); this only smooths the compositing and the inner scroll. */ #cart-drawer { will-change: transform; } #cart-drawer .overflow-y-auto { overscroll-behavior: contain; } /* FAQ answer reveal ------------------------------------------------------- The panel is toggled with the plain 'hidden' class (no height maths), so the open state gets a short fade-and-settle instead. */ .faq-a:not(.hidden) { animation: faq-open .26s cubic-bezier(.22, 1, .36, 1) both; } @keyframes faq-open { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: none; } } .faq-item.is-open { border-color: rgba(0, 171, 200, .35); } /* Snap rails (events gallery, exam chips) --------------------------------- */ .snap-x { scroll-padding-left: 1.25rem; scroll-padding-right: 1.25rem; } @media (prefers-reduced-motion: no-preference) { .snap-x { scroll-behavior: smooth; } } /* Reduced motion ---------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { #faculty-modal:not(.hidden), #product-modal:not(.hidden), #gallery-lightbox:not(.hidden), #cart-backdrop:not(.hidden), #faculty-modal:not(.hidden) #faculty-modal-panel, #product-modal:not(.hidden) [role="dialog"], #gallery-lightbox:not(.hidden) figure, .faq-a:not(.hidden) { animation: none !important; } #cart-drawer { transition: none !important; } } /* ========================================================================== Product detail page (product.html) Only the two states the JS toggles by attribute — the rest of the page is Tailwind. Attribute selectors keep product.js from having to juggle class lists the way the homepage tab modules do. ========================================================================== */ /* Detail tabs -------------------------------------------------------------- */ .pd-tab { border-bottom: 2px solid transparent; color: #64748b; /* slate-500 */ margin-bottom: -1px; /* sit on the rail */ } .pd-tab:hover { color: var(--c-navy); } .pd-tab[aria-selected="true"] { color: var(--c-navy); border-bottom-color: var(--c-cyan); } /* Panel swap --------------------------------------------------------------- */ .pd-panel:not(.hidden) { animation: faq-open .26s cubic-bezier(.22, 1, .36, 1) both; } @media (prefers-reduced-motion: reduce) { .pd-panel:not(.hidden) { animation: none !important; } } /* ========================================================================== Hero carousel + feature strip Each banner owns a hue, so the four slides read as four destinations rather than one repeated template. The gradient runs on the diagonal so the lit corner sits behind the headline and the deep corner behind the artwork. ========================================================================== */ /* Four stacked layers, painted top-down, over the per-slide diagonal base: 1. a broad light pool behind the portrait, so she reads as lit 2. --slide-glow, the slide's own hue blooming off the right edge 3. a soft lift in the top-left corner, under the eyebrow and headline 4. a bottom vignette that settles the dots and arrows onto a darker floor Every stop ends on a zero-alpha of its OWN colour — plain `transparent` interpolates through transparent-black and greys the midpoint. */ .hero-slide { background: radial-gradient(115% 80% at 74% 26%, rgba(255, 255, 255, .12) 0%, rgba(255, 255, 255, .045) 40%, rgba(255, 255, 255, 0) 66%), var(--slide-glow, none), radial-gradient(60% 55% at 4% 6%, rgba(255, 255, 255, .07) 0%, rgba(255, 255, 255, 0) 62%), radial-gradient(110% 55% at 50% 112%, rgba(0, 0, 0, .34) 0%, rgba(0, 0, 0, 0) 66%), var(--slide-bg, var(--c-navy)); } .hero-slide--clat { --slide-bg: linear-gradient(135deg, #0d3670 0%, #092c5c 45%, #051f42 100%); --slide-glow: radial-gradient(72% 62% at 88% 58%, rgba(0, 171, 200, .22) 0%, rgba(0, 171, 200, 0) 64%); } .hero-slide--judiciary { --slide-bg: linear-gradient(135deg, #4535ab 0%, #3a2c96 50%, #2f2580 100%); --slide-glow: radial-gradient(72% 62% at 88% 58%, rgba(129, 140, 248, .22) 0%, rgba(129, 140, 248, 0) 64%); } .hero-slide--market { --slide-bg: linear-gradient(135deg, #0d6347 0%, #0a5038 50%, #063d2b 100%); --slide-glow: radial-gradient(72% 62% at 88% 58%, rgba(0, 168, 135, .24) 0%, rgba(0, 168, 135, 0) 64%); } .hero-slide--aibe { --slide-bg: linear-gradient(135deg, #7d2338 0%, #5f1a2b 50%, #48131f 100%); --slide-glow: radial-gradient(72% 62% at 88% 58%, rgba(249, 190, 20, .16) 0%, rgba(249, 190, 20, 0) 64%); } /* Slides swap with the plain 'hidden' class, so the incoming one just fades. */ .hero-slide:not(.hidden) { animation: hero-fade .45s ease both; } @keyframes hero-fade { from { opacity: 0; } to { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .hero-slide:not(.hidden) { animation: none !important; } } /* Feature strip -------------------------------------------------------------- Six cards under the banner. Each carries its own --accent, which drives the icon tile plus the whole hover state, so one rule covers all six. */ .feature-card { background: #fff; border: 1px solid #e4e9f0; border-radius: 12px; transition: border-color .2s ease, background-color .2s ease, transform .2s ease, box-shadow .2s ease; } .feature-card:hover { border-color: color-mix(in srgb, var(--accent) 40%, #fff); background: color-mix(in srgb, var(--accent) 6%, #fff); transform: translateY(-2px); box-shadow: 0 10px 26px -16px rgba(0, 45, 93, .45); } .feature-card:hover .feature-card__title { color: var(--accent); } .feature-card__icon { background: var(--accent); border-radius: 9px; } .feature-card__title { transition: color .2s ease; } /* ========================================================================== Square button mode Every real