/* ============================================================================ Sky - design layer ---------------------------------------------------------------------------- Additive. Remove the in layouts/master.njk and the theme is exactly as it was. Three things it fixes: 1. BORDERS the theme mixed 8 treatments across 3 systems (white-alpha, silver-alpha, solid grey). Now one scale. 2. RADII boxes used 8/12/16/20/24px. Now three tiers. 3. DEPTH body was flat #09090b and the hero's aurora + stat glows were sitting at opacity 0, so the page had no depth at all. It never sets the `background` shorthand on a component, so cards that show an image through a transparent surface keep working. ============================================================================ */ :root { /* rhythm */ --sky-section-py: clamp(56px, 6.5vw, 100px); /* type scale */ --sky-h1: clamp(2.25rem, 5.2vw, 4.25rem); --sky-h2: clamp(1.75rem, 3.2vw, 2.75rem); --sky-sub: clamp(0.95rem, 1.1vw, 1.0625rem); /* border + radius tokens live in custom.css, which is always loaded */ --sky-ink: #fafafa; --sky-muted: #8a8a90; } /* ============================ 1. BORDERS ============================ */ /* collapse every bordered surface onto one colour, keeping widths intact */ .product-neo-card, .game-card, .pm-card, .testimonial, .faq .accordion-item, .pricing-plan-cards-grid, .pricing-card-featured, .card-image-wrapper, .form-control, .input-group, .variants .variant, .cart-item-bg, .bg-gray, .border, .rounded, .rounded-3 { border-color: var(--sky-line) !important; } /* dividers inside a surface should be quieter than its outline */ .testimonial .footer, .card-footer, .pricing-card-content-space, hr { border-color: var(--sky-line-soft) !important; } .product-neo-card:hover, .game-card:hover, .pm-card:hover, .testimonial:hover, .variants .variant:hover, .variants .variant.active, .form-control:focus { border-color: var(--sky-line-strong) !important; } /* ============================ 2. RADII ============================== */ .product-neo-card, .game-card, .pm-card, .testimonial, .faq .accordion-item, .card-image-wrapper, .cart-item-bg, .bg-gray, .pricing-plan-cards-grid { border-radius: var(--sky-r-md) !important; } .form-control, .variants .variant, .input-group, .badge-item, .btn:not(.btn-primary):not(.btn-outline-primary):not(.scroll-up-btn) { border-radius: var(--sky-r-sm) !important; } /* the image inside a card must follow the card's corners, never fight them */ .card-image-wrapper { border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; } /* ============================ 3. DEPTH ============================== */ /* the page had none. a top glow, a vignette and a fine grain, all behind the content and all pointer-transparent. */ body::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(1100px 620px at 50% -8%, rgba(216, 216, 216, 0.085), transparent 62%), radial-gradient(760px 520px at 88% 14%, rgba(216, 216, 216, 0.045), transparent 60%), radial-gradient(680px 480px at 6% 42%, rgba(216, 216, 216, 0.035), transparent 60%); } body::after { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .5; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E"); } /* keep everything the visitor actually reads above those two layers */ #app, .navbar, header, footer { position: relative; z-index: 1; } /* NOT revived on purpose: .aurora-container and .stat-glow live inside overflow:hidden boxes, so turning them on recreates the clipped-glow seam. The fixed backdrop in section 7 lights the page instead. */ /* ====================== 4. RHYTHM + TYPE ============================ */ .games-section, .pm-section, .cta-discord-section, .text-video-section, .faq, .text-block, #app .component.container.py-20 { padding-top: var(--sky-section-py) !important; padding-bottom: var(--sky-section-py) !important; } /* hero was 1243px: padding stacked .hero(0) + .container(96) + .content(128) */ .hero.height-short { min-height: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; } .hero > .container { padding-top: clamp(56px, 6vw, 88px) !important; padding-bottom: clamp(44px, 4.5vw, 68px) !important; } .hero .content { padding-top: 0 !important; padding-bottom: clamp(28px, 3.5vw, 48px) !important; } .hero h1 { font-size: var(--sky-h1) !important; line-height: 1.04 !important; letter-spacing: -0.03em !important; margin-bottom: 1.1rem !important; } .pc-main-title, .pm-title, .cta-main-title, .tv-title, .faq-title, .section-title h2, .component > .container > h2, .component > h2 { font-size: var(--sky-h2) !important; line-height: 1.12 !important; letter-spacing: -0.022em !important; margin-bottom: 0.65rem !important; } .pc-main-subtitle, .pm-subtitle, .cta-sub-title, .tv-subtitle, .faq-subtitle { font-size: var(--sky-sub) !important; line-height: 1.6 !important; color: var(--sky-muted) !important; max-width: 54ch; margin-left: auto !important; margin-right: auto !important; } .pc-header, .pm-header, .faq-header, .tv-header, .cta-header { margin-bottom: clamp(32px, 3.6vw, 56px) !important; } /* ====================== 5. LIFT ON HOVER ============================ */ .product-neo-card, .game-card, .pm-card, .testimonial { transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease !important; } .product-neo-card:hover, .game-card:hover, .pm-card:hover, .testimonial:hover { transform: translateY(-3px) !important; box-shadow: 0 18px 44px rgba(0, 0, 0, .5) !important; } /* ============================ 6. MOBILE ============================= */ @media (max-width: 575.98px) { :root { --sky-section-py: 48px; --sky-r-md: 16px; } .hero > .container { padding-top: 48px !important; padding-bottom: 36px !important; } body::after { opacity: .35; } } @media (prefers-reduced-motion: reduce) { .product-neo-card, .game-card, .pm-card, .testimonial { transition: none !important; } .product-neo-card:hover, .game-card:hover, .pm-card:hover, .testimonial:hover { transform: none !important; } } /* ============================================================================ 7. ONE CONTINUOUS BACKDROP (this is what fixes the banding) ---------------------------------------------------------------------------- The hard horizontal lines were never a colour change - every section is the same #09090b. Each section painted its OWN ambient glow inside a box with overflow:hidden, e.g. .pm-bg-glows spans 1736px -> 2633px .pm-section spans 1936px -> 2433px overflow:hidden so a 60px-blurred glow was sliced off flat 200px above the section top. Two straight cuts, one per edge, and the section read as a lighter rectangle. Feathering each one is whack-a-mole. Instead: switch the per-section glow boxes off and light the whole page from a single fixed layer behind everything. A layer that spans the viewport cannot be clipped by a section, so there is nothing left to cut. ============================================================================ */ .pm-bg-glows, .pc-bg-glows, .cta-bg-glows, .tv-bg-glows, [class*="bg-glows"], .pm-glow, .pc-glow { display: none !important; } /* the page's only ambient light - fixed, so it never meets a section edge */ body::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(1200px 700px at 50% -10%, rgba(216, 216, 216, 0.10), transparent 60%), radial-gradient(900px 600px at 85% 30%, rgba(216, 216, 216, 0.05), transparent 58%), radial-gradient(800px 560px at 10% 70%, rgba(216, 216, 216, 0.04), transparent 58%); } /* fine grain, so the large gradients do not band on cheap panels */ body::after { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .45; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E"); } /* every section becomes a clear pane over that one backdrop */ .hero, .games-section, .pm-section, .cta-discord-section, .text-video-section, .faq, .text-block, #app .component { background-color: transparent !important; } #app, .navbar, header, footer { position: relative; z-index: 1; } /* the footer painted pure #000 against the page's #09090b - a visible step. fade into it instead. */ .footer-main-container { background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.55) 35%, rgba(0, 0, 0, 0.85) 100%) !important; }