/* ========================================================= fudosha.net /assets/css/tiles.css?v=20260911-final-01 Shared tile design for ABOUT / HISTORY / NETWORK --------------------------------------------------------- Design concept: - page background remains white after the opening sky motion - each card keeps a quiet piece of sky inside the card shell - the two inner surfaces float above it with soft shadows - common shell/surface styling lives only in this file - page CSS keeps only page-specific layout/content behavior ========================================================= */ :root{ /* shell: a small remnant of the site's sky world */ --fd-tile-sky-image: url("/soz/backdrop/page-sky.webp?v=20260911-final-01"); --fd-tile-shell-line: rgba(38, 113, 163, .54); --fd-tile-shell-radius: 14px; --fd-tile-shell-tint-a: rgba(244, 249, 253, .66); --fd-tile-shell-tint-b: rgba(214, 233, 246, .60); /* inner floating surfaces */ /* text/info side: keep the current clearer glass look */ --fd-tile-info-bg: linear-gradient(180deg, rgba(255,255,255,.92) 0, rgba(255,255,255,.56) 2px, rgba(255,255,255,0) 2px), linear-gradient(120deg, rgba(255,255,255,.20) 0%, rgba(255,255,255,.11) 22%, rgba(255,255,255,.32) 34%, rgba(255,255,255,.08) 48%, rgba(255,255,255,0) 62%), linear-gradient(180deg, rgba(255,255,255,.46) 0%, rgba(245,250,255,.34) 24%, rgba(225,240,252,.28) 58%, rgba(195,224,244,.24) 100%); /* media side: return to a whiter, milkier glass plate */ --fd-tile-media-bg: linear-gradient(180deg, rgba(255,255,255,.96) 0, rgba(255,255,255,.68) 2px, rgba(255,255,255,0) 2px), linear-gradient(120deg, rgba(255,255,255,.24) 0%, rgba(255,255,255,.16) 22%, rgba(255,255,255,.36) 34%, rgba(255,255,255,.10) 48%, rgba(255,255,255,0) 62%), linear-gradient(180deg, rgba(255,255,255,.90) 0%, rgba(248,252,255,.84) 24%, rgba(232,244,252,.78) 58%, rgba(208,232,246,.72) 100%); --fd-tile-surface-line: rgba(255, 255, 255, .74); --fd-tile-surface-radius: 18px; --fd-tile-surface-shadow: 0 10px 20px rgba(35, 68, 91, .12), 0 2px 6px rgba(35, 68, 91, .06), inset 0 1px 0 rgba(255,255,255,.90), inset 0 -1px 0 rgba(104, 164, 205, .18); /* shared spacing */ --fd-tile-pad: clamp(.62rem, 1.25vw, .82rem); --fd-tile-inner-gap: clamp(.62rem, 1.3vw, .88rem); --fd-tile-stack-gap: clamp(1.25rem, 3vw, 1.85rem); --fd-tile-info-pad: clamp(.78rem, 1.3vw, .95rem); --fd-tile-media-inner-radius: 12px; /* shared content divider */ --fd-tile-divider: rgba(28, 34, 51, .22); --fd-tile-divider-gap-top: 0; --fd-tile-divider-gap-bottom: .72rem; } /* ========================================================= Shared sky shell ========================================================= */ :is(.about-card, .history-card, .network-card){ width: 100%; overflow: hidden; border: 1.5px solid var(--fd-tile-shell-line); border-radius: var(--fd-tile-shell-radius); box-shadow: inset 0 1px 0 rgba(255,255,255,.42); background: linear-gradient(135deg, var(--fd-tile-shell-tint-a) 0%, rgba(230, 242, 250, .58) 48%, var(--fd-tile-shell-tint-b) 100%), var(--fd-tile-sky-image) center 42% / cover no-repeat; } :is(.about-card-inner, .history-card-inner, .network-card-inner){ padding: var(--fd-tile-pad); } /* keep the two surfaces separated so the sky can be seen between them */ :is(.about-tile-grid, .history-grid, .network-tile-grid){ gap: var(--fd-tile-inner-gap); } /* ========================================================= Shared floating information surface ========================================================= */ :is(.about-info, .history-info, .network-info){ min-width: 0; padding: var(--fd-tile-info-pad); border: 1px solid var(--fd-tile-surface-line); border-radius: var(--fd-tile-surface-radius); background: var(--fd-tile-info-bg); box-shadow: var(--fd-tile-surface-shadow); /* fallback stays readable without backdrop-filter */ -webkit-backdrop-filter: blur(3px) saturate(1.06) brightness(1.03); backdrop-filter: blur(3px) saturate(1.06) brightness(1.03); } /* ========================================================= Shared content divider ABOUT / HISTORY / NETWORK use the same explicit separator between heading/meta and body content. ========================================================= */ .fd-tile-divider{ width: 100%; margin: var(--fd-tile-divider-gap-top) 0 var(--fd-tile-divider-gap-bottom); border: 0; border-top: 2px dashed var(--fd-tile-divider); } /* ========================================================= Shared floating media surface Media tiles use the same translucent surface as information tiles. Page CSS may override only content-specific sizing/behavior. ========================================================= */ :is(.about-tile-fig picture, .history-media, .network-tile-fig){ border: 1px solid var(--fd-tile-surface-line); border-radius: var(--fd-tile-surface-radius); background: var(--fd-tile-media-bg); box-shadow: var(--fd-tile-surface-shadow); overflow: hidden; } /* Images themselves do not need a second drop shadow. */ :is(.about-tile-fig img, .history-img, .network-banner){ box-shadow: none; } :is(.about-tile-fig img, .history-img){ border-radius: var(--fd-tile-media-inner-radius); } /* HISTORY keeps a little breathing room around its pale artwork. */ .history-media{ padding: 10px; } /* ABOUT uses the same translucent media surface as the other tiles. */ .about-tile-fig picture{ background: var(--fd-tile-media-bg); } /* NETWORK letterbox space must remain transparent so differing banner aspect ratios do not introduce a separate black design element. */ .network-tile-fig{ background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; } /* ========================================================= Mobile Keep the existing page-specific mobile compositions. These shared rules only remove surplus outer padding/shadow. ========================================================= */ @media (max-width: 767px){ .about-card-inner, .history-card-inner{ padding: 0; } /* ABOUT and HISTORY intentionally become image-led on SP. */ .about-tile-grid, .history-grid{ gap: 0; } .about-tile-fig picture, .history-media{ border-radius: 0; border-left: 0; border-right: 0; box-shadow: none; } .about-tile-fig img, .history-img{ border-radius: 0; } } /* ========================================================= Body readability boost on glass tiles Strengthen only body copy, not labels/capsules. ========================================================= */ .about-info .about-row dd, .history-info .history-desc, .network-info .network-desc, .network-info .network-row dd{ font-weight: 500; text-shadow: -1px -1px 0 rgba(255,255,255,.98), 0px -1px 0 rgba(255,255,255,.98), 1px -1px 0 rgba(255,255,255,.98), -1px 0px 0 rgba(255,255,255,.98), 1px 0px 0 rgba(255,255,255,.98), -1px 1px 0 rgba(255,255,255,.98), 0px 1px 0 rgba(255,255,255,.98), 1px 1px 0 rgba(255,255,255,.98); } /* ========================================================= Shared tile text alignment ABOUT / HISTORY / NETWORK information surfaces are left aligned. Image-side layout classes remain independent from text alignment. ========================================================= */ :is(.about-info, .history-info, .network-info){ text-align:left; }