/* daily.css — styling for the /daily page (interactive per-day charts). Layered on top of styles.css so the legacy `.daily-page` layout container keeps working. The `.dailynew-page` class on is the internal scoping marker that lets these overrides take precedence over the older `.daily-card` / `.daily-gallery` rules in styles.css; the class name is historic from when this lived at /dailynew. */ .dailynew-page .daily-hero { padding: 1.75rem 2rem; background: linear-gradient(145deg, var(--bg-card), var(--bg-card-alt)); border: 2px solid var(--line); border-radius: 24px; box-shadow: 0 25px 45px rgba(0, 0, 0, 0.45), var(--glow); text-align: left; } .dailynew-page .daily-hero .page-title { margin: 0 0 0.55rem; } .dailynew-page .daily-hero-badge { display: inline-flex; margin: 0 0 1.05rem; } .dailynew-page .daily-hero-intro { margin: 0; color: var(--text); opacity: 0.92; line-height: 1.55; max-width: 60ch; } .dailynew-page .daily-hero .graph-disclaimer--note { margin-top: 1rem; } /* Window-pill selector tucked inside the hero block (after the intro) */ .dailynew-page .daily-hero .window-selector { margin: 1.1rem 0 0; flex-wrap: wrap; } /* "Deel deze tip" share strip, centered as its own little card under the gallery so it visually closes off the day-cards. */ .dailynew-page .share-strip { margin: 0 auto 1.25rem; max-width: 520px; padding: 0.85rem 1.25rem; justify-content: center; background: rgba(255, 255, 255, 0.025); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 14px; } @media (max-width: 540px) { .dailynew-page .share-strip { padding: 0.75rem 1rem; } } /* Today card: subtle accent border + prominent "Nu" stat */ .daily-card--today { border-color: rgba(255, 59, 59, 0.28); } .daily-card-head-text { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; } .daily-card-sub { margin: 0; color: var(--muted); font-size: 0.82rem; letter-spacing: 0.04em; font-family: "Inter", system-ui, sans-serif; } /* The "Nu" hero block — only rendered on the today card, sits between the head and the chart. Visually the most important element on this card. */ .daily-card-now { display: flex; align-items: center; flex-wrap: wrap; justify-content: space-between; gap: 0.6rem; padding: 0.85rem 1rem; border-radius: 14px; background: linear-gradient(135deg, rgba(255, 59, 59, 0.14), rgba(255, 59, 59, 0.04)); border: 1px solid rgba(255, 59, 59, 0.22); } .daily-card-now-main { display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 0.4rem; min-width: 0; } .daily-card-now-label { font-family: "Inter", system-ui, sans-serif; font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); font-weight: 600; } .daily-card-now-price { font-family: "Doto", "Inter", sans-serif; font-size: 1.7rem; font-weight: 700; letter-spacing: 0.02em; color: var(--text); line-height: 1; } .daily-card-now-unit { font-size: 0.85rem; color: var(--muted); font-family: "Inter", system-ui, sans-serif; } .daily-card-now-delta { display: inline-flex; align-items: center; padding: 0.22rem 0.55rem; border-radius: 999px; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.02em; white-space: nowrap; border: 1px solid transparent; } .daily-card-now-delta--down { background: rgba(46, 204, 113, 0.12); border-color: rgba(46, 204, 113, 0.35); color: #2ecc71; } .daily-card-now-delta--up { background: rgba(255, 59, 59, 0.1); border-color: rgba(255, 59, 59, 0.32); color: #ff8a8a; } /* Past hours on today's chart fade back so the future stands out */ .forecast-bar--past { opacity: 0.32; } /* Vertical "Nu" marker on the today card chart */ .forecast-now-line { stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: 4 3; opacity: 0.9; } .forecast-now-label { fill: var(--accent); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } /* "nu" tag inside the chart tooltip (separate from goedkoop venster tag) */ .daily-card-tip .tag--now { background: rgba(255, 59, 59, 0.18); color: #ff8a8a; } .dailynew-page .daily-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; } .dailynew-loading, .dailynew-error { grid-column: 1 / -1; text-align: center; color: var(--muted); margin: 1.5rem 0; } .daily-card { display: flex; flex-direction: column; gap: 0.85rem; background: linear-gradient(150deg, var(--bg-card), var(--bg-card-alt)); border: 1.5px solid rgba(255, 255, 255, 0.06); border-radius: 22px; padding: 1.25rem 1.4rem 1.35rem; box-shadow: 0 18px 32px rgba(0, 0, 0, 0.4); cursor: pointer; transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease; } .daily-card:hover { transform: translateY(-3px); border-color: rgba(255, 59, 59, 0.45); box-shadow: 0 24px 42px rgba(0, 0, 0, 0.5), 0 0 32px rgba(255, 59, 59, 0.15); } /* The card head used to be a

which inherited position:sticky from the global header rule in styles.css. Keeping these explicit overrides as defense in case any descendant ever uses

. */ .daily-card-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.05rem 0.15rem 0 0.35rem; position: static; background: transparent; border-bottom: 0; box-shadow: none; z-index: auto; transition: none; will-change: auto; } .daily-card-title { margin: 0; font-family: "Doto", "Inter", sans-serif; font-size: 1.3rem; letter-spacing: 0.05em; color: var(--accent); } .daily-card-tag { display: inline-flex; align-items: center; padding: 0.28rem 0.65rem; border-radius: 999px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.14); color: var(--text); font-size: 0.74rem; font-weight: 600; letter-spacing: 0.04em; white-space: nowrap; flex-shrink: 0; } .daily-card-tag--cheap { background: rgba(46, 204, 113, 0.12); border-color: rgba(46, 204, 113, 0.4); color: #2ecc71; } .daily-card-tag--peak { background: rgba(255, 59, 59, 0.1); border-color: rgba(255, 59, 59, 0.4); color: var(--accent); } .daily-card-chart-wrap { position: relative; background: rgba(0, 0, 0, 0.18); border-radius: 14px; padding: 0.4rem 0.4rem 0.2rem; } .daily-chart { width: 100%; height: auto; display: block; } .daily-card-tip { position: absolute; left: 50%; transform: translateX(-50%); bottom: -0.5rem; background: rgba(20, 20, 20, 0.95); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 999px; padding: 0.25rem 0.75rem; font-size: 0.78rem; color: var(--muted); opacity: 0; pointer-events: none; transition: opacity 0.15s ease; white-space: nowrap; max-width: calc(100% - 2rem); overflow: hidden; text-overflow: ellipsis; } .daily-card-tip.is-visible { opacity: 1; } .daily-card-tip .tag { display: inline-block; margin-left: 0.4rem; padding: 0.05rem 0.35rem; border-radius: 6px; background: rgba(46, 204, 113, 0.2); color: #4dd791; font-size: 0.72rem; font-weight: 600; } .daily-card-tip strong { color: var(--text); } .daily-card-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; } .daily-stat { display: flex; flex-direction: column; padding: 0.6rem 0.75rem; border-radius: 12px; background: rgba(255, 255, 255, 0.025); border: 1px solid rgba(255, 255, 255, 0.06); } .daily-stat-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); font-weight: 600; } .daily-stat-value { margin-top: 0.2rem; font-family: "Doto", "Inter", sans-serif; font-size: 1.15rem; letter-spacing: 0.02em; font-weight: 700; color: var(--text); } .daily-stat-detail { margin-top: 0.15rem; font-size: 0.78rem; color: var(--muted); } .daily-stat--cheap .daily-stat-value, .daily-stat--cheap .daily-stat-detail { color: #2ecc71; } .daily-stat--peak .daily-stat-value, .daily-stat--peak .daily-stat-detail { color: var(--accent); } .daily-stat--window { background: rgba(46, 204, 113, 0.07); border-color: rgba(46, 204, 113, 0.28); } .daily-stat--window .daily-stat-value { color: #2ecc71; } .daily-stat--window .daily-stat-detail { color: var(--muted); } /* Lightbox overrides — wide on desktop so the chart can breathe */ .lightbox-content--daily { max-width: min(1480px, 94vw); max-height: 92vh; overflow-y: auto; padding: 2rem 2.25rem 2.5rem; } @media (max-width: 880px) { .lightbox-content--daily { max-width: 96vw; padding: 1.4rem 1.4rem 1.8rem; } } .lightbox-title { margin: 0 0 1rem; font-family: "Doto", "Inter", sans-serif; font-size: 1.6rem; letter-spacing: 0.05em; color: var(--accent); } .lightbox-chart-wrap { position: relative; background: rgba(0, 0, 0, 0.25); border-radius: 16px; padding: 0.6rem 0.6rem 0.4rem; margin-bottom: 1.25rem; } .daily-chart--large { width: 100%; height: auto; } .lightbox-stats { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem; } .lightbox-stat { flex: 1; min-width: 180px; padding: 0.85rem 1rem; border-radius: 12px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); } .lightbox-stat--window { background: rgba(46, 204, 113, 0.08); border-color: rgba(46, 204, 113, 0.3); } .lightbox-stat-label { display: block; font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); } .lightbox-stat-value { display: block; margin-top: 0.25rem; font-family: "Doto", "Inter", sans-serif; font-size: 1.35rem; font-weight: 700; letter-spacing: 0.02em; color: var(--text); } .lightbox-stat--window .lightbox-stat-value { color: #2ecc71; } .lightbox-stat-detail { display: block; margin-top: 0.2rem; font-size: 0.82rem; color: var(--muted); } .lightbox-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; } .lightbox-columns h3 { margin: 0 0 0.5rem; font-size: 1rem; font-family: "Inter", system-ui, sans-serif; letter-spacing: 0.02em; color: var(--text); } .lightbox-list { margin: 0; padding: 0; list-style: none; } .lightbox-list li { padding: 0.4rem 0.65rem; border-radius: 8px; font-size: 0.92rem; margin-bottom: 0.25rem; } .lightbox-list--cheap li { background: rgba(46, 204, 113, 0.08); color: #2ecc71; } .lightbox-list--peak li { background: rgba(255, 59, 59, 0.08); color: var(--accent); } /* Mobile / tablet: horizontal swipe-carousel with scroll-snap */ @media (max-width: 880px) { .dailynew-page .daily-gallery { display: flex; flex-direction: row; grid-template-columns: none; max-width: none; width: 100%; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; gap: 0.85rem; padding: 0.25rem 0 0.75rem; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .dailynew-page .daily-gallery::-webkit-scrollbar { display: none; } .dailynew-page .daily-card { flex: 0 0 calc(100% - 2.5rem); width: auto; max-width: none; margin: 0; scroll-snap-align: start; } .dailynew-page .daily-card:hover { transform: none; } .dailynew-loading, .dailynew-error { flex: 1 0 100%; } .daily-dots { display: flex; justify-content: center; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 1.25rem; padding: 0; } .daily-dot { width: 8px; height: 8px; border-radius: 50%; border: 0; padding: 0; background: rgba(255, 255, 255, 0.22); cursor: pointer; transition: background 0.2s ease, transform 0.2s ease; } .daily-dot:hover { background: rgba(255, 255, 255, 0.4); } .daily-dot.is-active { background: var(--accent); transform: scale(1.35); } .daily-swipe-hint { display: block; text-align: center; color: var(--muted); font-size: 0.78rem; margin: 0.1rem 0 0.6rem; opacity: 0.75; } } @media (min-width: 881px) { .daily-dots, .daily-swipe-hint { display: none; } } @media (max-width: 540px) { .dailynew-page .daily-hero { padding: 1.4rem 1.3rem; } .daily-card { padding: 1.1rem 1rem 1.2rem; } .daily-card-title { font-size: 1.15rem; } .daily-card-stats { gap: 0.45rem; } .daily-stat { padding: 0.5rem 0.6rem; } .daily-stat-value { font-size: 1rem; } .lightbox-columns { grid-template-columns: 1fr; } .lightbox-stats { flex-direction: column; } }