/* ============================================================ Theme: Franks neues Layout — "Vision Blue" Activated by :root[data-theme="franks"] Based on the elections design variant v2 (modules/democracy-elections/v/v2/index.html): same Deep-Space atmosphere as Original, but cards get a thick blue gradient frame, outward-bleeding glow, a sparkle on the bottom-left corner and a hover lift. ============================================================ */ :root[data-theme="franks"]{ color-scheme: dark; /* Card surface tones from v2 (--card-top / --card-bot) */ --frk-card-top:#111b2e; --frk-card-bot:#0d1423; --frk-blue:#4d9fff; --frk-blue-deep:#2158d8; /* The two background stacks of the v2 frame (rest / hover) */ --frk-frame: linear-gradient(145deg, var(--frk-card-top), var(--frk-card-bot)) padding-box, radial-gradient(190px 150px at 6px calc(100% - 6px), #e2f1ff 0%, rgba(140,200,255,.9) 28%, rgba(77,159,255,.45) 52%, rgba(33,88,216,0) 75%) border-box, linear-gradient(135deg, #6cb2ff 0%, var(--frk-blue-deep) 55%, rgba(33,88,216,.35) 100%) border-box; --frk-shadow-hover: 0 0 30px 0 rgba(77,159,255,.55), 0 10px 26px -6px rgba(140,200,255,.65), -12px 16px 36px -10px rgba(170,220,255,.7), 0 20px 32px -10px rgba(0,0,0,.9), 0 24px 46px -14px rgba(33,88,216,.65); /* Tile tokens (dashboard shell) — the frame itself is drawn by the scoped rules below; tokens carry radius + shadow for consumers that only read the variables. */ --app-tile-radius:20px; --app-tile-shadow: 0 0 22px -2px rgba(77,159,255,.4), 0 8px 20px -6px rgba(140,200,255,.55), -10px 14px 30px -10px rgba(170,220,255,.6), 0 14px 26px -8px rgba(0,0,0,.85), 0 18px 38px -12px rgba(33,88,216,.55); --glow-accent:0 0 0 1px rgba(77,159,255,.35),0 4px 24px rgba(77,159,255,.35); } /* Module topbar: franks shows only back arrow + centered USERS logo. The icon+title heading is dropped — on phones it collides with the centered logo and gets truncated anyway (per Frank, 2026-07-04); the page name stays in and in the page content itself. */ :root[data-theme="franks"] .topbar__heading{ display:none; } /* ---- Scoped components: the v2 card treatment ---- Covers dashboard tiles (.widget), the shared module card (.card) and the module-specific primary card surfaces that don't ride on the shared class. Deliberately NOT themed (they keep the Original look): option/radio cards whose selected state is colour-coded (.cns-radio-card, .bin-sector/.bin-opt, .bof-opt, .e4a-scn, .rtp-card), dense list rows (offer/dish/recent/saving items), toolbars, chips, pills, inputs, dialogs and map/iframe containers. */ :root[data-theme="franks"] :is(.widget, .card, .cbp-card, .cbp-skeleton-card, /* cities-bestpractices */ .grn-card, .grn-skeleton-card, /* cities-green */ .ckb-recipe-card, .ckb-section-card, .ckb-skeleton-card, /* cooking-cookbook */ .vid-card, .vid-skeleton-card, /* entertainment-funnyvideos */ .fin-card, .fin-resources, .fin-skeleton-card, /* finance-checker */ .sol-card, .sol-skeleton-card, /* info-solutions */ .tch-card, .tch-skeleton-card, /* info-teachers */ .std-card, .std-skeleton-card, /* jobs-studies */ .job-card, .job-skeleton-card, /* jobs-sustainable */ .cld-card, /* info-climate-dashboard */ .eng-card, /* info-energy-dashboard */ .ep-gallery-card, /* buildings-energypass */ .lfl-gallery-card, /* consumption-leaflet */ .shp-gallery-card, /* consumption-shopping */ .mnu-gallery-card, /* cooking-menucard */ .e4a-sliders /* info-earth4all */ ){ border:3px solid transparent; border-radius:20px; background:var(--frk-frame); box-shadow:var(--app-tile-shadow); } :root[data-theme="franks"] :is(.widget, .cbp-card, .grn-card, .ckb-recipe-card, .vid-card, .fin-card, .sol-card, .tch-card, .std-card, .job-card, .cld-card, .eng-card, .ep-gallery-card, .lfl-gallery-card, .shp-gallery-card, .mnu-gallery-card ):is(:hover, :focus-visible), :root[data-theme="franks"] .card--hover:hover{ transform:translateY(-3px); border-color:transparent; background:var(--frk-frame); box-shadow:var(--frk-shadow-hover); } /* .card--hover uses `translate` (not transform) for its lift */ :root[data-theme="franks"] .card--hover:hover{ transform:none; translate:0 -3px; } /* cld-/eng-cards colour-code each indicator with a 4px border-left accent in Original; the gradient frame paints over all borders, so the stripe is restated as an inset shadow on top of the glow stacks (rest + hover). */ :root[data-theme="franks"] .cld-card{ box-shadow:inset 4px 0 0 var(--cld-accent, var(--app-accent-primary)), var(--app-tile-shadow); } :root[data-theme="franks"] .eng-card{ box-shadow:inset 4px 0 0 var(--eng-accent, var(--app-accent-primary)), var(--app-tile-shadow); } :root[data-theme="franks"] .cld-card:hover{ box-shadow:inset 4px 0 0 var(--cld-accent, var(--app-accent-primary)), var(--frk-shadow-hover); } :root[data-theme="franks"] .eng-card:hover{ box-shadow:inset 4px 0 0 var(--eng-accent, var(--app-accent-primary)), var(--frk-shadow-hover); } /* Sparkle on the bottom-left corner — bright core, one long tapering ray, shorter cross ray (straight from v2). Dashboard tiles clip overflow by default, so the theme lifts that; the disabled overlay (.widget.disabled::after) stays inside its own rounded box. No sparkle on skeleton cards (their opacity shimmer would make it blink) or on cards that clip overflow (.vid-card, .cld-card, .eng-card — the corner ornament would be cut off). */ /* overflow:visible lets the corner sparkle poke past the tile edge, but it also re-enables the grid item's automatic minimum size (min-size:auto) — intrinsic image sizes would blow the 1fr tracks up. Pin the minimum to 0 so tiles keep the exact same geometry as Original. */ :root[data-theme="franks"] .widget{ overflow:visible; min-width:0; min-height:0; } :root[data-theme="franks"] :is(.card, .cbp-card, .grn-card, .ckb-recipe-card, .ckb-section-card, .fin-card, .fin-resources, .sol-card, .tch-card, .std-card, .job-card, .ep-gallery-card, .lfl-gallery-card, .shp-gallery-card, .mnu-gallery-card, .e4a-sliders ){ position:relative; } :root[data-theme="franks"] .widget::before, :root[data-theme="franks"] :is(.card, .cbp-card, .grn-card, .ckb-recipe-card, .ckb-section-card, .fin-card, .fin-resources, .sol-card, .tch-card, .std-card, .job-card, .ep-gallery-card, .lfl-gallery-card, .shp-gallery-card, .mnu-gallery-card, .e4a-sliders )::after{ content:''; position:absolute; left:-19px; bottom:-19px; /* centre sits on the rounded border line */ width:44px; height:44px; transform:rotate(-24deg); background: radial-gradient(circle 5px at 50% 50%, #ffffff 0%, rgba(226,241,255,.9) 45%, rgba(190,227,255,0) 100%), radial-gradient(48% 7% at 50% 50%, rgba(255,255,255,.95) 0%, rgba(142,201,255,.55) 45%, rgba(142,201,255,0) 78%), radial-gradient(7% 34% at 50% 50%, rgba(255,255,255,.85) 0%, rgba(142,201,255,.45) 45%, rgba(142,201,255,0) 78%), radial-gradient(circle 15px at 50% 50%, rgba(120,190,255,.35) 0%, rgba(120,190,255,0) 100%); pointer-events:none; z-index:6; } :root[data-theme="franks"] body.show-disabled-overlay .widget.disabled::after{ border-radius:17px; } @media (prefers-reduced-motion: reduce){ :root[data-theme="franks"] :is(.widget, .card, .card--hover, .cbp-card, .grn-card, .ckb-recipe-card, .vid-card, .fin-card, .sol-card, .tch-card, .std-card, .job-card, .cld-card, .eng-card, .ep-gallery-card, .lfl-gallery-card, .shp-gallery-card, .mnu-gallery-card ){ transition:none; } }