/* ============================================================ Future in Black — cream/black editorial TEMPLATE (site-wide) Loaded LAST in so it overrides per-page inline styles. ============================================================ */ /* =================================================================== "Future in Black" template layer — cinematic dark treatment over the existing AussieCasinoGuide content. Scoped with .tfib- prefixes. =================================================================== */ /* Cinematic hero */ .tfib-hero { min-height: 86vh; display: flex; align-items: center; padding-top: 56px; } .tfib-hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(4,14,31,0.55) 0%, transparent 30%, rgba(4,14,31,0.85) 100%); } .tfib-hero > .container { width: 100%; position: relative; z-index: 2; } .tfib-hero h1 { font-size: clamp(2.3rem, 6vw, 4.4rem); line-height: 1.05; max-width: 980px; margin-bottom: 22px; letter-spacing: -0.03em; } .tfib-hero .hero-subtitle { max-width: 720px; } /* Rising-word headline animation (split applied by JS) */ .tfib-rise .tfib-w { display: inline-block; overflow: hidden; vertical-align: top; } .tfib-rise .tfib-w > span { display: inline-block; transform: translateY(112%); animation: tfibRise 0.95s cubic-bezier(0.22,1,0.36,1) forwards; animation-delay: calc(var(--i) * 0.05s + 0.15s); } @keyframes tfibRise { to { transform: translateY(0); } } /* Scroll cue */ .tfib-scrollcue { display: inline-flex; align-items: center; gap: 12px; margin-top: 34px; color: var(--on-surface-muted); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; } .tfib-scrollcue__line { width: 1px; height: 38px; background: linear-gradient(180deg, var(--gold), transparent); animation: tfibDrop 1.8s ease-in-out infinite; transform-origin: top; } @keyframes tfibDrop { 0%,100% { transform: scaleY(0.4); opacity: 0.5; } 50% { transform: scaleY(1); opacity: 1; } } /* Numbered section eyebrows (//01 …) injected by JS */ .tfib-eyebrow { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--on-surface-muted); } .tfib-eyebrow b { font-weight: 800; background: linear-gradient(90deg, var(--gold), var(--gold-dark)); -webkit-background-clip: text; background-clip: text; color: transparent; } /* Scroll-reveal */ .tfib-reveal { opacity: 0; transform: translateY(38px); transition: opacity 0.7s cubic-bezier(0.22,1,0.36,1), transform 0.7s cubic-bezier(0.22,1,0.36,1); } .tfib-reveal.is-visible { opacity: 1; transform: none; } /* Anchor offset for sticky header */ .content-section, .top-picks-section, .affiliate-table-section { scroll-margin-top: 96px; } /* Corner live-clock + quick menu (signature element, bottom-right) */ .tfib-corner { position: fixed; right: 22px; bottom: 22px; z-index: 1200; display: flex; flex-direction: row-reverse; align-items: center; gap: 14px; } .tfib-clock { display: flex; align-items: center; gap: 8px; white-space: nowrap; font-size: 0.78rem; color: var(--on-surface-variant); background: rgba(8,20,37,0.72); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(69,70,77,0.5); padding: 8px 14px; border-radius: var(--radius-full); } .tfib-clock__slash { color: var(--gold); } .tfib-menu { position: relative; } .tfib-menu__pill { display: flex; align-items: center; gap: 9px; cursor: pointer; border: none; background: linear-gradient(135deg, var(--gold), var(--gold-dark)); border-radius: var(--radius-full); padding: 6px 16px 6px 7px; box-shadow: var(--inset-hi), 0 6px 18px rgba(255,185,95,0.35); } .tfib-menu__icon { width: 26px; height: 26px; border-radius: 50%; background: rgba(71,42,0,0.22); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; } .tfib-menu__icon span { display: block; width: 12px; height: 1.6px; background: var(--on-gold); border-radius: 2px; transition: transform 0.25s ease, opacity 0.2s ease; } .tfib-menu__label { color: var(--on-gold); font-size: 0.8rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; line-height: 1; } .tfib-menu__list { list-style: none; margin: 0; padding: 6px; position: absolute; right: 0; bottom: calc(100% + 10px); min-width: 210px; display: flex; flex-direction: column; gap: 2px; background: rgba(15,23,38,0.96); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(69,70,77,0.6); border-radius: 14px; box-shadow: var(--shadow-lg); opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s; } .tfib-menu.is-open .tfib-menu__list { opacity: 1; visibility: visible; transform: none; } .tfib-menu__list a { display: block; padding: 9px 16px; border-radius: 9px; font-size: 0.9rem; font-weight: 600; color: var(--on-surface-variant); } .tfib-menu__list a:hover { background: rgba(255,185,95,0.1); color: var(--gold); } .tfib-menu.is-open .tfib-menu__icon span:nth-child(1) { transform: translateY(4.6px) rotate(45deg); } .tfib-menu.is-open .tfib-menu__icon span:nth-child(2) { opacity: 0; } .tfib-menu.is-open .tfib-menu__icon span:nth-child(3) { transform: translateY(-4.6px) rotate(-45deg); } @media (max-width: 768px) { .tfib-clock { display: none; } .tfib-corner { right: 14px; bottom: 14px; } .tfib-hero { min-height: 78vh; padding-top: 32px; } } @media (prefers-reduced-motion: reduce) { .tfib-rise .tfib-w > span { animation: none; transform: none; } .tfib-reveal { opacity: 1; transform: none; transition: none; } .tfib-scrollcue__line { animation: none; } } /* =================================================================== "Future in Black" — CREAM / BLACK EDITORIAL theme (full palette flip) Overrides shared.css + inline dark theme. Loaded last; uses !important where the base theme also forces values. =================================================================== */ :root{ --ed-cream:#f4efe4; --ed-cream2:#ece3d4; --ed-paper:#fffdf8; --ed-ink:#15110b; --ed-ink2:#403a31; --ed-line:#dcd2c0; --ed-amber:#e89200; --ed-amber-d:#b97500; --ed-green:#1f5d43; } /* base */ body{ background:var(--ed-cream) !important; background-image: radial-gradient(1100px 520px at 0% -8%, rgba(31,93,67,.07), transparent 60%), radial-gradient(900px 500px at 100% 0%, rgba(232,146,0,.08), transparent 55%) !important; color:var(--ed-ink) !important; } h1,h2,h3,h4,h5,h6{ color:var(--ed-ink); } p{ color:var(--ed-ink2); } a{ color:var(--ed-amber-d); } a:hover{ color:var(--ed-amber); } /* top bar (dark strip, holds the live clock) */ .top-bar{ background:var(--ed-ink) !important; color:#e9e2d3 !important; border-bottom:none !important; } .top-bar a{ color:#c8bfb0 !important; } .top-bar a:hover{ color:var(--ed-amber) !important; } .syd-clock{ display:inline-flex; align-items:center; gap:6px; margin-right:14px; font-weight:700; letter-spacing:.05em; color:#f4efe4; } .syd-clock .syd-slash{ color:var(--ed-amber); } /* header (kept dark so the light logo stays legible) */ header{ background:var(--ed-ink) !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; border-bottom:none !important; box-shadow:0 2px 0 0 var(--ed-amber) !important; } nav a{ color:#e9e2d3 !important; } nav a:hover, nav a.active{ color:var(--ed-amber) !important; border-bottom-color:var(--ed-amber) !important; } .menu-toggle{ color:var(--ed-amber) !important; } .dropdown-menu{ background:#1c170f !important; border-color:rgba(255,255,255,.12) !important; } .dropdown-menu a{ color:#cfc6b6 !important; } .dropdown-menu a:hover{ background:rgba(232,146,0,.12) !important; color:var(--ed-amber) !important; } .dropdown-label{ color:#9a9080 !important; } /* HERO — cream, oversized editorial type */ .hero, .tfib-hero{ background:var(--ed-cream) !important; border-bottom:1px solid var(--ed-line) !important; } .hero::before{ display:none !important; } .tfib-hero::after{ display:none !important; } .tfib-hero h1, .hero h1{ color:var(--ed-ink) !important; font-weight:900 !important; font-size:clamp(2.6rem,7.5vw,5.6rem) !important; letter-spacing:-.04em !important; line-height:.98 !important; text-transform:uppercase; max-width:15ch; } .hero-subtitle{ color:var(--ed-ink2) !important; font-size:1.12rem !important; } .hero-subtitle a{ color:var(--ed-amber-d) !important; text-decoration:underline; } .hero-badge{ background:#fff !important; border:1px solid var(--ed-line) !important; color:var(--ed-ink) !important; } .hero-update{ color:var(--ed-ink2) !important; } .tfib-scrollcue{ color:var(--ed-ink2) !important; } .tfib-scrollcue__line{ background:linear-gradient(180deg,var(--ed-ink),transparent) !important; } /* numbered eyebrows */ .tfib-eyebrow{ color:var(--ed-ink2) !important; font-size:.8rem !important; letter-spacing:.2em !important; } .tfib-eyebrow b{ background:linear-gradient(90deg,var(--ed-green),var(--ed-amber)) !important; -webkit-background-clip:text; background-clip:text; color:transparent !important; font-size:.92rem; } /* top-picks band (cream) + white cards */ .top-picks-section{ background:var(--ed-cream) !important; border-bottom:1px solid var(--ed-line) !important; } .top-picks-section h2{ color:var(--ed-ink) !important; } .hero-card{ background:var(--ed-paper) !important; border:1px solid var(--ed-line) !important; color:var(--ed-ink) !important; box-shadow:0 10px 30px rgba(21,17,11,.08) !important; } .hero-card-name{ color:var(--ed-ink) !important; } .hero-card-tagline{ color:var(--ed-ink2) !important; } .hero-card-offer{ color:var(--ed-green) !important; } .hero-card-rank, .hero-card-badge{ color:#2a1c00 !important; } .hero-card.featured{ border-color:var(--ed-amber) !important; box-shadow:0 14px 36px rgba(232,146,0,.20) !important; } .hero-card-logo{ background:#fff !important; } /* AFFILIATE LIST — dark band for rhythm + contrast, white rows */ .affiliate-table-section{ background:var(--ed-ink) !important; border-bottom:none !important; background-image:none !important; } .affiliate-table-section .section-title{ color:#f4efe4 !important; } .affiliate-table-section .section-header, .affiliate-table-section .section-header *{ color:#cfc6b6 !important; } .aff-row{ background:#fffdf8 !important; border:1px solid rgba(0,0,0,.08) !important; } .aff-row:nth-child(1), .aff-row:nth-child(2){ background:linear-gradient(135deg,#fff4e0,#fffdf8) !important; border-color:var(--ed-amber) !important; } .aff-name{ color:var(--ed-ink) !important; } .aff-tagline{ color:var(--ed-ink2) !important; } .aff-offer{ background:rgba(232,146,0,.15) !important; border-color:rgba(232,146,0,.45) !important; color:var(--ed-amber-d) !important; } .aff-rating-score{ color:var(--ed-green) !important; } .aff-rating-stars{ color:var(--ed-amber) !important; } .aff-logo{ background:#fff !important; } /* main content — white paper cards on cream */ .content-section, .sidebar-widget, .toc, .author-box, .info-card, .faq-item, .glass-card, .casino-card{ background:var(--ed-paper) !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; border:1px solid var(--ed-line) !important; box-shadow:0 8px 24px rgba(21,17,11,.06) !important; color:var(--ed-ink) !important; } .content-section h2{ color:var(--ed-ink) !important; border-bottom-color:var(--ed-line) !important; font-size:clamp(1.6rem,3.2vw,2.4rem) !important; } .content-section h2::before{ background:var(--ed-amber) !important; } .content-section h3{ color:var(--ed-green) !important; } .content-section p, .content-section li, .content-section ul, .content-section ol{ color:var(--ed-ink2) !important; } .casino-name{ color:var(--ed-ink) !important; } .casino-tagline{ color:var(--ed-ink2) !important; } .casino-feature{ background:var(--ed-cream2) !important; border-color:var(--ed-line) !important; } .casino-feature-value{ color:var(--ed-green) !important; } .sidebar-widget h3, .toc h4{ color:var(--ed-green) !important; border-bottom-color:var(--ed-line) !important; } .sidebar-nav a{ color:var(--ed-ink2) !important; } .sidebar-nav a:hover{ background:rgba(232,146,0,.1) !important; color:var(--ed-amber-d) !important; } .breadcrumbs, .breadcrumbs a{ color:var(--ed-ink2) !important; } /* tables */ .table-wrapper{ border-color:var(--ed-line) !important; } .comparison-table{ background:#fff !important; } .comparison-table thead{ background:var(--ed-ink) !important; } .comparison-table th{ color:#ffd79a !important; border-bottom-color:rgba(232,146,0,.5) !important; } .comparison-table td{ color:var(--ed-ink2) !important; border-bottom-color:var(--ed-line) !important; } .comparison-table tr:hover td{ background:rgba(232,146,0,.07) !important; } /* faq */ .faq-question{ color:var(--ed-ink) !important; } .faq-question::after{ color:var(--ed-amber-d) !important; } .faq-answer{ color:var(--ed-ink2) !important; } /* pros / cons */ .pros{ background:rgba(31,93,67,.08) !important; border-color:rgba(31,93,67,.25) !important; } .cons{ background:rgba(176,0,18,.06) !important; border-color:rgba(176,0,18,.22) !important; } .pros h4{ color:var(--ed-green) !important; } .pros li::before{ color:var(--ed-green) !important; } /* info cards */ .info-card-icon{ background:rgba(232,146,0,.12) !important; color:var(--ed-amber-d) !important; } .info-card h4{ color:var(--ed-ink) !important; } .info-card p{ color:var(--ed-ink2) !important; } /* quick-answer */ .quick-answer-card{ background:#fff4e0 !important; border-color:rgba(232,146,0,.3) !important; border-left-color:var(--ed-amber) !important; } .quick-answer-card h2{ color:var(--ed-ink) !important; } .quick-answer-card p{ color:var(--ed-ink2) !important; } .quick-answer-label{ color:var(--ed-amber-d) !important; } /* responsible-gambling sidebar box */ .responsible-gambling-box{ background:linear-gradient(135deg,rgba(176,0,18,.06),rgba(232,146,0,.05)) !important; border-color:rgba(176,0,18,.25) !important; } .responsible-gambling-box h3{ color:#b00012 !important; } /* author box */ .author-info .name{ color:var(--ed-ink) !important; } .author-info p{ color:var(--ed-ink2) !important; } /* buttons — amber on dark text, high contrast on cream */ .btn-gold, .aff-cta, .hero-card-cta, .hero-cta-module .cta-btn{ background:linear-gradient(135deg,var(--ed-amber),var(--ed-amber-d)) !important; color:#2a1c00 !important; } .btn-outline{ border-color:var(--ed-ink) !important; color:var(--ed-ink) !important; } .btn-outline:hover{ background:var(--ed-ink) !important; color:var(--ed-cream) !important; border-color:var(--ed-ink) !important; } /* footer stays dark (closing band) — quick-menu pill amber on cream */ .tfib-corner{ top:auto; } /* keep menu pill bottom-right */ @media (max-width:768px){ .tfib-hero h1, .hero h1{ font-size:clamp(2rem,11vw,3.1rem) !important; } .syd-clock{ display:none; } } /* Affiliate-table H2 (subject heading) — light, centred on the dark band */ .affiliate-table-section h2, .affiliate-table-section h2.aff-table-h2 { color: #f4efe4 !important; text-align: center; font-size: clamp(1.5rem, 3vw, 2.3rem); line-height: 1.1; letter-spacing: -0.02em; max-width: 24ch; margin: 0 auto 4px; } /* Breadcrumbs → H1 gap: uniform sitewide, matching the homepage. */ .container + .hero > .container { margin-top: -4.5rem; } /* Affiliate-table heading + subtitle: centred, bold, consistent size (per screenshot) */ .affiliate-table-section h2, .affiliate-table-section h2.aff-table-h2 { text-align: center !important; font-weight: 800 !important; font-size: clamp(1.6rem, 4.5vw, 2.4rem) !important; line-height: 1.12 !important; max-width: 22ch; margin-left: auto !important; margin-right: auto !important; } .affiliate-table-section .section-header { justify-content: center !important; text-align: center !important; } .affiliate-table-section .section-title { text-align: center !important; } /* ===== MOBILE: affiliate table above the fold ===== On pages with an affiliate table, compact the hero so the order above the fold is H1 → author → table H2 → affiliate table. Subtitle/badges/cards are hidden on mobile only (still present on desktop & in the DOM). */ @media (max-width: 768px) { body:has(.affiliate-table-section) .hero, body:has(.affiliate-table-section) .tfib-hero { min-height: 0 !important; display: block !important; padding-top: 10px !important; padding-bottom: 8px !important; } /* cancel the breadcrumb negative-pull so the short hero can't cover the breadcrumbs */ body:has(.affiliate-table-section) .container + .hero > .container, body.home-page .container + .hero > .container { margin-top: 0 !important; } /* keep only H1 + author above the fold */ body:has(.affiliate-table-section) .hero .hero-subtitle, body:has(.affiliate-table-section) .hero .hero-badges, body:has(.affiliate-table-section) .hero .subtitle-toggle, body:has(.affiliate-table-section) .hero .tfib-scrollcue { display: none !important; } body:has(.affiliate-table-section) .tfib-hero h1, body:has(.affiliate-table-section) .hero h1 { font-size: clamp(1.5rem, 6.5vw, 2.05rem) !important; line-height: 1.05 !important; margin: 0 auto 6px !important; } body:has(.affiliate-table-section) .hero .hero-update { margin: 0 !important; font-size: 0.74rem !important; } /* table sits tight under the hero */ body:has(.affiliate-table-section) .affiliate-table-section { padding-top: 12px !important; padding-bottom: 16px !important; } body:has(.affiliate-table-section) .affiliate-table-section h2 { font-size: clamp(1.35rem, 6vw, 1.85rem) !important; margin-bottom: 2px !important; } body:has(.affiliate-table-section) .affiliate-table-section .section-header { margin-bottom: 10px !important; } /* homepage: drop the top-picks cards on mobile so the table is above the fold */ body.home-page .top-picks-section { display: none !important; } } /* ===== Centre hero content — sitewide, mobile + desktop ===== */ .hero, .hero > .container, .hero .hero-inner, .hero .hero-text { text-align: center !important; } .hero .hero-inner, .hero .hero-text { align-items: center !important; } .hero h1, .hero .hero-subtitle { margin-left: auto !important; margin-right: auto !important; text-align: center !important; } .hero .hero-update, .hero .hero-badges, .hero .tfib-scrollcue { justify-content: center !important; } /* ===== Desktop: collapse the tall empty hero space (sitewide) ===== */ @media (min-width: 769px) { .hero, .tfib-hero { min-height: 0 !important; padding-top: 24px !important; padding-bottom: 40px !important; } /* short hero no longer needs the negative pull (would cover breadcrumbs) */ .container + .hero > .container { margin-top: 0 !important; } } /* Payment-method chips: white text on a solid dark chip (were low-contrast on cream) */ .payment-icon { color: #ffffff !important; background: rgba(21, 17, 11, 0.82) !important; border-color: rgba(255, 255, 255, 0.18) !important; }