/* Linear preview list on home */ .linear { display: grid; gap: 22px; } .slice { border: 1px solid rgba(180,180,180,0.35); border-radius: 16px; background: rgba(22,22,30,0.6); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); overflow: hidden; transition: border-color 0.2s, box-shadow 0.2s; } .slice:hover { border-color: rgba(180,180,180,0.55); box-shadow: 0 6px 24px rgba(0,0,0,0.4); } .slice-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--line); } .slice h3 { margin: 0; font-size: 22px; font-family: 'Cinzel', serif; font-weight: 600; letter-spacing: 0.06em; } /* Apply the same gradient treatment used for main h2 but only on the homepage (add class `home` to the on index.php) */ .home .slice h3 { font-weight: 600; /* Slightly more pronounced accent for section titles on the homepage */ background: linear-gradient(135deg, var(--text) 0%, var(--accent) 70%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; font-family: 'Cinzel', serif; letter-spacing: 0.06em; } .items { list-style: none; padding: 6px 8px 12px; margin: 0; display: grid; gap: 8px; } .items li { padding: 10px 8px; border-radius: 8px; } .items li:hover { background: rgba(255,255,255,0.06); } .items .meta { font-size: 12px; color: var(--muted); margin-bottom: 4px; /* Keep meta (date / tag) on a single line on compact lists like the homepage */ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Admin comment author highlight */ .admin-author { color: #ef4444; font-weight: 600; } /* ensure color overrides the .meta muted color by targeting the element inside .meta */ .items .meta .admin-author { color: #ef4444; font-weight: 600; } /* Small badge for admin comments */ .admin-badge { display: inline-block; background: rgba(239,68,68,0.08); color: #ef4444; font-size: 11px; padding: 2px 6px; border-radius: 999px; margin-left:8px; vertical-align: middle; } .items .title { color: var(--text); text-decoration: none; font-weight: 600; } .items .title:hover { text-decoration: none; color: var(--accent); } .home .slice .items .title { /* Keep news titles on a single line on the homepage and crop with ellipsis */ display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .items .excerpt { color: var(--muted); font-size: 13px; /* Allow long words / continuous text to wrap nicely */ overflow-wrap: anywhere; /* modern browsers */ word-break: break-word; /* fallback */ hyphens: auto; /* Do not preserve raw user newlines here to avoid large vertical gaps in lists */ white-space: normal; margin-top: 6px; line-height: 1.5; } /* Image fallback for blurred excerpts (anonymous users) */ /* .excerpt-img removed — excerpts now rendered as text blocks rather than generated images */ .quick-contact { display: flex; gap: 10px; padding: 12px 16px; font-family: 'Cinzel', serif; font-weight: 600; letter-spacing: 0.04em; } .quick-contact input { flex: 1; } .btn.tiny { padding: 6px 10px; font-size: 12px; } /* Hero styles using Noto Serif for the hero title and tagline */ .hero { padding: 24px 0 12px; /* reduced vertical spacing (top, right/left, bottom) */ text-align: center; } .hero-title { margin: 0; font-size: 48px; line-height: 1.05; font-family: 'Noto Serif', serif; font-weight: 700; } .hero-tagline { margin: 12px auto 0; max-width: 920px; font-size: 20px; color: var(--muted); font-family: 'Noto Serif', serif; font-weight: 400; } /* Blur articles for anonymous users — only for items explicitly marked `.blurred` */ .not-logged .items li.blurred img, .not-logged .items li.blurred .thumb { -webkit-filter: blur(6px); filter: blur(6px); transition: filter .18s ease; } /* Partial blur for excerpts: only the `.excerpt-blurred` span inside a blurred item is blurred */ .excerpt .excerpt-visible { filter: none; } .excerpt .excerpt-blurred { display: inline-block; } .not-logged .items li.blurred .excerpt .excerpt-blurred { -webkit-filter: blur(6px); filter: blur(6px); transition: filter .18s ease; } /* Slightly dim blurred items to make the effect clearer */ .not-logged .items li.blurred { opacity: 0.96; } /* Utility: mark a block inside an item to remain sharp for preview */ .not-logged .items li .no-blur, .not-logged .items li .content .no-blur, .not-logged .items li .excerpt .no-blur { -webkit-filter: none !important; filter: none !important; } /* Even more specific: ensure no-blur wins when the LI itself is marked .blurred */ .not-logged .items li.blurred .meta .no-blur, .not-logged .items li.blurred .content .no-blur, .not-logged .items li.blurred .excerpt .no-blur { -webkit-filter: none !important; filter: none !important; } /* Base reset */ *, *::before, *::after { box-sizing: border-box; } html { height: 100%; -webkit-text-size-adjust: 100%; } body { margin: 0; display: flex; flex-direction: column; min-height: 100vh; } img, svg { display: block; } :root { /* Dark.design-inspired monochrome palette with red accents */ --bg: #000000; /* pure black background */ --surface: #13131a; /* primary surface / panels */ --surface-2: #1a1a24; /* subtle secondary surface */ --line: rgba(255,255,255,0.08); /* subtle dividers */ --text: #ffffff; /* pure white text */ --muted: #8b8b9a; /* muted text */ --accent: #b91c1c; /* red accent for buttons and focus */ --accent-2: #b91c1c; /* unify secondary accent to red */ } /* Local custom fonts removed (E1234 etc.) — using system fonts and Cinzel for header */ /* Header uses Cinzel (Google Font). Other custom fonts removed. */ .site-header, .site-header .brand, .site-header .brand .wordmark, .site-header .nav, .site-header .primary, .site-header .primary a, .site-header .primary ul li a, .site-header .auth, .site-header .auth a, .site-header .cta, .site-header nav.primary ul li a, .site-header nav.auth a { font-family: 'Cinzel', serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial !important; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Toast (flash) */ .toast { position: fixed; top: 16px; right: 16px; background: var(--surface); color: var(--text); border: 1px solid var(--line); box-shadow: 0 8px 24px rgba(0,0,0,0.35); padding: 12px 40px 12px 12px; border-radius: 10px; z-index: 1000; } .toast.success { border-color: var(--accent-2); } .toast.error { border-color: #ef4444; } .toast .toast-close { position: absolute; right: 10px; top: 8px; background: transparent; border: none; color: var(--muted); font-size: 18px; cursor: pointer; } body { font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji"; color: var(--text); /* Subtle site background: solid black fallback with a very light black->red gradient overlay */ background: linear-gradient(160deg, rgba(0,0,0,1) 0%, rgba(12,8,10,0.94) 45%, rgba(24,6,8,0.96) 70%, rgba(239,68,68,0.02) 100%); background-color: var(--bg); background-attachment: fixed; background-size: cover; line-height: 1.6; /* min-height kept for older pages but layout is controlled by flex */ } /* Ensure main content grows to push footer to bottom on short pages */ main { flex: 1 0 auto; } /* Footer should stick to bottom when content is short */ .site-footer { margin-top: auto; } .container { max-width: 1200px; margin: 0 auto; padding: 0 24px; } /* Header */ .site-header { position: sticky; top: 0; z-index: 50; backdrop-filter: saturate(150%) blur(12px); -webkit-backdrop-filter: saturate(150%) blur(12px); background: rgba(10,10,15,0.85); border-bottom: 1px solid var(--line); /* header font is set via the broader header selectors to 'Cinzel' */ } .site-header .container { /* Make the brand/logo sit flush to the left edge of the header */ padding-left: 0; } .site-header .divider { height: 1px; background: var(--line); } .nav { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px; height: 76px; } .brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; } .brand .wordmark { font-weight: 700; letter-spacing: 0.20em; font-size: 20px; opacity: .95; } .logo { display: grid; place-items: center; } /* Logo image (use PNG file, tint to site red) */ .logo-img { width: 80px; height: 80px; object-fit: contain; display: block; /* Larger logo and stronger red tint to match brand request */ transition: transform 160ms ease; } /* Extra-strong red variant for header logo when needed (adds stronger saturation/hue) */ .logo-img.logo-red { transform: translateZ(0); } .primary { /* center nav area and ignore brand margin so it's always centered */ margin-left: 0; justify-self: center; display: flex; align-items: center; } .primary ul { display: flex; gap: 28px; list-style: none; padding: 0; margin: 0; justify-content: center; } .primary a { position: relative; display: inline-block; color: var(--text); text-decoration: none; font-weight: 500; letter-spacing: 0.04em; /* slightly more spacing for legibility */ font-size: 16px; /* slightly larger header links */ padding: 8px 14px; /* small horizontal increase to balance size */ border: 1px solid transparent; border-radius: 10px; transition: color .15s ease, background .15s ease, border-color .15s ease, transform .12s ease; font-family: 'Cinzel', serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial !important; } .primary a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -12px; height: 2px; /* stronger accent band in the underline gradient */ background: linear-gradient(90deg, transparent 20%, var(--accent) 50%, transparent 80%); transform: scaleX(0); transform-origin: center; transition: transform .25s ease; } .primary a.active::after { transform: scaleX(1); } .primary a:hover { color: var(--accent); } .primary a:hover { color: var(--accent); background: rgba(185,28,28,0.06); border-color: rgba(185,28,28,0.12); } .primary a:hover::after { transform: scaleX(1); } /* Active/selected state */ .primary a.active { background: linear-gradient(90deg, rgba(185,28,28,0.12), rgba(185,28,28,0.06)); border-color: rgba(185,28,28,0.18); color: var(--accent); } .auth { display: flex; gap: 20px; align-items: center; justify-self: end; } .auth .user-label { color: var(--accent); font-size: 14px; font-weight: 700; margin-right: 6px; } .auth a { color: var(--text); text-decoration: none; font-weight: 500; transition: color 0.15s; font-family: 'Cinzel', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial !important; } .auth a:hover { color: var(--accent); } .auth .cta { padding: 8px 14px; border: 1px solid var(--accent); border-radius: 10px; background: transparent; color: var(--accent); } /* Mobile menu */ .menu-toggle { display: none; width: 42px; height: 42px; border-radius: 10px; border: 1px solid var(--line); background: transparent; gap: 5px; flex-direction: column; align-items: center; justify-content: center; } .menu-toggle span { display: block; width: 22px; height: 2px; background: var(--text); } /* Contact page: social links block shown above footer */ .contact-socials { display:flex; justify-content:flex-start; align-items:center; } .contact-socials .social-buttons { display:flex; gap:12px; align-items:center; justify-content:flex-start; } .contact-socials .social-btn img { width:28px; height:28px; display:block; } .contact-socials .social-btn { display:inline-flex; align-items:center; justify-content:center; padding:6px; border-radius:8px; transition:transform .12s ease, background .12s ease; } .contact-socials .social-btn:hover { transform:translateY(-3px); background:rgba(185,28,28,0.06); } /* Reduce visual weight now that we removed the panel wrapper */ .contact-socials { background: transparent; border: none; } /* Bottom social row aligned with footer columns Grid with left column (1fr) and right column (auto) so icons can be centered within left column area */ .site-social-row { max-width:1200px; margin: 18px auto 8px; padding: 0 24px; display: grid; grid-template-columns: 1fr auto; align-items: center; } .site-social-row .social-left { display:flex; justify-content:flex-start; } .site-social-row .social-right { display:block; } .site-social-row .social-buttons { display:flex; gap:12px; } .site-social-row .social-btn img { width:28px; height:28px; } .site-social-row .social-btn { padding:8px; border-radius:8px; } /* Sections */ .section { padding: 56px 0; border-bottom: 1px solid var(--line); } .section:last-of-type { border-bottom: none; padding-bottom: 96px; } /* Detail image for news/projects */ .detail-image { width: 100%; height: 420px; object-fit: contain; background: var(--surface); border-radius: 8px; margin-bottom: 12px; display: block; } /* Thumbnail used in lists (news/projects/admin) */ .thumb { width: 120px; height: 80px; object-fit: cover; object-position: center center; border-radius: 6px; display: inline-block; vertical-align: middle; margin-right: 12px; } .items li { display: flex; gap: 12px; align-items: flex-start; } .items li .content { flex: 1; text-align: left; display: flex; flex-direction: column; align-items: flex-start; } /* Ensure excerpts are left-aligned and have no unexpected indentation */ .items .excerpt { margin: 0; text-align: left; width: 100%; } /* Ensure the visible part of excerpts is always left-aligned and not centered */ .items li .content .excerpt .excerpt-visible, .items li .content .excerpt .excerpt-blurred { display: inline-block; width: 100%; text-align: left; margin: 0; padding: 0; } /* Ensure titles occupy full width so excerpts start at same left edge */ .items .title { display: block; width: 100%; margin-bottom: 6px; } /* Hover animation for list items (news, projects, home) */ .items li { transition: transform 220ms cubic-bezier(.22,.9,.16,1), box-shadow 220ms ease, background-color 180ms ease; will-change: transform; -webkit-tap-highlight-color: transparent; } .items li:hover { transform: translateY(-6px); box-shadow: 0 14px 34px rgba(0,0,0,0.6); background: rgba(255,255,255,0.03); } .items li .thumb { transition: transform 220ms cubic-bezier(.22,.9,.16,1), box-shadow 220ms ease; transform-origin: center center; } .items li:hover .thumb { transform: scale(1.04); box-shadow: 0 8px 18px rgba(0,0,0,0.5); } @media (prefers-reduced-motion: reduce) { .items li, .items li .thumb { transition: none !important; transform: none !important; } } @media (max-width: 900px) { /* reduce movement on small screens */ .items li:hover { transform: translateY(-3px); } } /* Make whole item appear clickable and keyboard-focusable when we set role="link" */ .items li[role="link"] { cursor: pointer; } .items li[role="link"]:focus { outline: none; box-shadow: 0 10px 30px rgba(239,68,68,0.14); border-radius: 10px; transform: translateY(-6px); } /* Respect reduced motion for focus transform too */ @media (prefers-reduced-motion: reduce) { .items li[role="link"]:focus { transform: none; box-shadow: 0 6px 14px rgba(0,0,0,0.28); } } /* Comments list: stack meta over the comment text (override list item flex used for previews) */ .items.comments { padding-left: 6px; } .items.comments li { display: block; padding: 8px 10px; } .items.comments li .meta { margin-bottom: 6px; } .items.comments li .excerpt { margin-top: 0; } /* Gallery thumbnails under detail text */ .gallery-thumb { width: 100px; height: 70px; object-fit: cover; border-radius: 6px; cursor: pointer; border: 1px solid rgba(255,255,255,0.04); } /* Lightbox overlay */ .lightbox-overlay { position: fixed; inset: 0; display:flex; align-items:center; justify-content:center; background: rgba(0,0,0,0.85); z-index: 9999; } .lightbox-overlay img { max-width: 85%; max-height: 90%; border-radius:8px; } .lightbox-overlay .close { position:absolute; top:18px; right:22px; color:#fff; font-size:22px; cursor:pointer; user-select:none; z-index:2; } .lightbox-overlay .nav { position:absolute; top:50%; transform:translateY(-50%); background: rgba(0,0,0,0.4); border: 1px solid rgba(255,255,255,0.15); color:#fff; width:72px; height:72px; border-radius:50%; font-size:34px; line-height:1; cursor:pointer; padding:0; display:flex; align-items:center; justify-content:center; transition: background 0.2s, border-color 0.2s, transform 0.2s; z-index:2; } .lightbox-overlay .nav:hover { background: rgba(0,0,0,0.7); border-color: var(--accent); } .lightbox-overlay .nav:active { transform: translateY(-50%) scale(0.95); } .lightbox-overlay .nav.prev { left: 28px; } .lightbox-overlay .nav.next { right: 28px; } .lightbox-overlay .counter { position:absolute; bottom:18px; left:50%; transform:translateX(-50%); color:#fff; font-size:13px; background: rgba(0,0,0,0.5); padding: 4px 10px; border-radius: 12px; letter-spacing: 0.04em; } @media (max-width: 600px) { .lightbox-overlay .nav { width:56px; height:56px; font-size:26px; } .lightbox-overlay .nav.prev { left: 12px; } .lightbox-overlay .nav.next { right: 12px; } .lightbox-overlay img { max-width: 80%; } } h2 { font-weight: 600; font-size: 44px; letter-spacing: 0.02em; margin: 0 0 18px; background: linear-gradient(135deg, var(--text) 0%, var(--accent) 75%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } h2 { font-family: 'Cinzel', serif; font-weight: 600; font-size: 44px; letter-spacing: 0.04em; margin: 0 0 18px; background: linear-gradient(135deg, var(--text), var(--accent)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .lead { color: var(--muted); margin: 6px 0 22px; } .panel { width: 100%; background: rgba(22,22,30,0.6); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 0.5px solid rgba(180,180,180,0.35); border-radius: 16px; box-shadow: 0 4px 24px rgba(0,0,0,0.4); } .panel.tall { height: 180px; } .panel.short { height: 120px; } /* Home previews */ .previews { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .preview { background: rgba(22,22,30,0.6); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(180,180,180,0.35); border-radius: 16px; overflow: hidden; } .preview header { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid var(--line); } .preview h3 { margin: 0; font-size: 22px; font-family: 'Cinzel', serif; font-weight: 600; letter-spacing: 0.06em; } .frame-wrap { position: relative; height: 260px; background: #0e0f13; } .frame-wrap iframe { width: 100%; height: 100%; border: 0; background: #0e0f13; } .btn.small { padding: 6px 10px; font-size: 13px; } .pager { display: flex; gap: 10px; align-items: center; justify-content: center; margin-top: 12px; } .pageinfo { color: var(--muted); font-size: 13px; } /* Contact */ .contact-form { margin-top: 18px; display: grid; gap: 16px; } .row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } label span { display: block; font-size: 13px; color: var(--muted); margin-bottom: 6px; } /* Contact page: side logo that doesn't affect layout - placed absolutely inside the container so it won't push content - hidden on narrow viewports to avoid overlap */ .contact-with-logo { position: relative; } .contact-side-logo { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); pointer-events: none; } .contact-side-logo img { display: block; height: 300px; width: auto; max-width: 280px; object-fit: contain; transition: height .18s ease, max-width .18s ease; } @media (max-width: 900px) { .contact-side-logo { display: none; } } input, textarea { width: 100%; padding: 12px 14px; color: var(--text); background: rgba(26,26,36,0.8); border: 1px solid var(--line); border-radius: 10px; outline: none; transition: border-color 0.2s, box-shadow 0.2s; } /* Reset for non-text inputs so checkboxes/radios/files aren't forced full-width */ input[type="checkbox"], input[type="radio"], input[type="file"] { width: auto; padding: 0; margin: 0; height: auto; display: inline-block; vertical-align: middle; align-self: center; } /* Prevent users from resizing the message box on the contact form */ .contact-form textarea { resize: none; } .block { display: block; } .btn { width: fit-content; color: #fff; background: #b91c1c; border: none; font-weight: 700; padding: 10px 18px; border-radius: 10px; cursor: pointer; transition: transform 0.15s, box-shadow 0.2s; } .btn:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(185,28,28,0.35); } input:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(185,28,28,0.25); } /* Social buttons used on contact page */ .social-buttons { display:flex; gap:12px; margin:12px 0 18px; } .social-btn { width:56px; height:56px; display:inline-flex; align-items:center; justify-content:center; border-radius:12px; background: rgba(255,255,255,0.02); border:1px solid var(--line); color:var(--text); text-decoration:none; transition: transform .12s, box-shadow .12s, background .12s; padding:6px; } .social-btn:hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(0,0,0,0.55); } .social-btn svg, .social-btn img { width:26px; height:26px; display:block; object-fit:contain; overflow:visible; } .social-btn.youtube { color: #ff0000; } .social-btn.tiktok { color: #00f2ea; } .social-btn.discord { color: #5865F2; } .social-btn.instagram { color: #E1306C; } .social-btn.x { color: #1DA1F2; } .social-btn.snapchat { color: #FFFC00; filter: drop-shadow(0 1px 0 rgba(0,0,0,0.4)); } /* Character counter for textareas */ .char-counter { color: var(--muted); font-size: 12px; margin-top: 6px; text-align: right; } /* Footer */ .site-footer { border-top: 1px solid var(--line); padding: 24px 0 40px; color: var(--muted); font-size: 14px; background: rgba(10,10,15,0.5); } /* Status widget (bottom-right persistent) */ .status-widget { position: fixed; right: 20px; bottom: 20px; z-index: 9999; min-width: 190px; max-width: 320px; } /* Use the existing .panel look and tweak for small floating card */ .status-widget.panel { /* subtle black -> red gradient background with a sensible fallback color */ background: linear-gradient(180deg, rgba(0,0,0,0.88) 0%, rgba(239,68,68,0.04) 100%); background-color: rgba(22,22,30,0.8); border: 1px solid rgba(180,180,180,0.18); padding: 8px 12px; border-radius: 12px; box-shadow: 0 12px 36px rgba(0,0,0,0.6); backdrop-filter: blur(8px); } .status-widget .sw-header { display:flex; align-items:center; justify-content:space-between; gap:8px; } .status-widget .sw-title { color:var(--muted); font-size:12px; font-weight:600; } .status-widget .sw-actions { display:flex; align-items:center; gap:6px; } .status-widget .sw-toggle { background: transparent; border: none; color: var(--muted); font-size: 16px; cursor: pointer; line-height:1; padding:2px 6px; } .status-widget .sw-body { margin-top:8px; } .status-widget .sw-row { display:flex; justify-content:space-between; align-items:center; gap:8px; } .status-widget .sw-count { font-weight:400; color: #ef4444; font-size:20px; font-family: 'Saira Stencil One', cursive; } .status-widget .sw-small { margin-top:6px; color:var(--muted); font-size:12px; display:flex; gap:6px; align-items:center; } /* Collapsed state */ .status-widget.collapsed { min-width: 44px; max-width: 220px; padding: 6px; } .status-widget.collapsed .sw-body { display:none; } /* Interactive animations for the status widget */ .status-widget { transition: transform 180ms cubic-bezier(.22,.9,.16,1), box-shadow 180ms ease, opacity 180ms ease, padding 160ms ease; will-change: transform, box-shadow; cursor: pointer; } .status-widget:hover { transform: translateY(-6px) scale(1.01); box-shadow: 0 20px 48px rgba(0,0,0,0.7); } .status-widget.pressed { transform: translateY(6px) scale(0.985); box-shadow: 0 6px 18px rgba(0,0,0,0.5); } .status-widget:focus { outline: none; /* Neutral focus shadow instead of red glow */ box-shadow: 0 12px 36px rgba(0,0,0,0.35); transform: translateY(-4px) scale(1.005); } @media (prefers-reduced-motion: reduce) { .status-widget, .status-widget:hover, .status-widget.pressed, .status-widget:focus { transition: none !important; transform: none !important; } } @media (max-width: 900px) { .status-widget { right: 12px; bottom: 12px; min-width: 140px; } .status-widget .sw-count { font-size: 16px; } } /* Sticky header shadow on scroll */ .shadow { box-shadow: 0 4px 30px rgba(0,0,0,0.5); } /* Responsive */ @media (max-width: 900px) { .nav { grid-template-columns: auto auto; grid-template-areas: "brand actions" "menu menu"; height: auto; padding: 14px 0; row-gap: 10px; } .brand { grid-area: brand; } .auth { grid-area: actions; justify-self: end; } .menu-toggle { display: inline-flex; } .primary { grid-area: menu; display: none; margin-left: 0; } .primary.open { display: block; } .primary ul { flex-direction: column; gap: 16px; padding: 8px 0; } .primary a::after { bottom: -6px; } .row { grid-template-columns: 1fr; } .previews { grid-template-columns: 1fr; } .linear { gap: 16px; } } /* Google sign-in button (official-like) */ .google-btn { display: inline-flex; align-items: center; gap: 12px; background: #fff; color: #3c4043; border: 1px solid #dadce0; padding: 10px 14px; border-radius: 10px; text-decoration: none; font-weight: 500; font-size: 15px; box-shadow: 0 1px 1px rgba(60,64,67,0.08); transition: box-shadow .12s ease, transform .08s ease; } .google-btn:focus { outline: 3px solid rgba(66,133,244,0.18); outline-offset: 2px; } .google-btn:hover { box-shadow: 0 6px 18px rgba(60,64,67,0.12); transform: translateY(-2px); } .google-btn:active { transform: translateY(0); } .google-btn .google-icon { display:inline-flex; width:18px; height:18px; } .google-btn .google-text { white-space:nowrap; } /* Keep button visually consistent on dark backgrounds by forcing the button area to stand out */ @media (prefers-reduced-motion: reduce) { .google-btn { transition: none; } } /* Blurred item hover: red overlay with lock icon + message */ .not-logged .items li.blurred { position: relative; overflow: hidden; } .not-logged .items li.blurred::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(185,28,28,0.06), rgba(185,28,28,0.12)); transition: opacity .18s ease; opacity: 0; pointer-events: none; z-index: 20; } .not-logged .items li.blurred:hover::after, .not-logged .items li.blurred:focus::after { opacity: 1; } /* Lock message overlay (uses a Unicode lock so no extra assets required) */ .not-logged .items li.blurred::before { content: "🔒 Merci de se connecter"; position: absolute; left: 12px; right: 12px; top: 12px; bottom: 12px; display: flex; align-items: center; justify-content: center; color: #fff; /* Use the same gradient treatment as the site background but slightly more opaque so the overlay remains clearly visible. */ background: linear-gradient(160deg, rgba(0,0,0,0.88) 0%, rgba(12,8,10,0.84) 45%, rgba(24,6,8,0.86) 70%, rgba(239,68,68,0.24) 100%); font-weight: 700; font-size: 15px; text-align: center; border-radius: 8px; opacity: 0; transform: translateY(6px); transition: opacity .18s ease, transform .18s ease; z-index: 30; pointer-events: none; } .not-logged .items li.blurred:hover::before, .not-logged .items li.blurred:focus::before { opacity: 1; transform: translateY(0); } /* Disable pointer events on links inside blurred items to prevent clicks */ .not-logged .items li.blurred a { pointer-events: none; } @media (prefers-reduced-motion: reduce) { .not-logged .items li.blurred::before { transition: none; transform: none; } }