/* jig_color_apple.css
jigtool/index.html — COLOR ONLY override to match /index.html Apple-like palette
Content/layout unchanged.
*/
html[data-theme="apple"]{
--txt:#1d1d1f;
--muted:#6e6e73;
--bg1:#ffffff;
--bg2:#f5f5f7;
--shadow: 0 12px 30px rgba(0,0,0,.12);
/* Apple blue */
--acc1:#0071e3;
--acc2:#2997ff;
/* light glass nav */
--navAlpha: .72;
--navAlphaSolid: .92;
--navBg: rgba(255,255,255,var(--navAlpha));
--navBgSolid: rgba(255,255,255,var(--navAlphaSolid));
}
/* Base background/text */
html[data-theme="apple"] body{
color: var(--txt);
background: linear-gradient(180deg, var(--bg1), var(--bg2));
}
/* Global nav: white glass */
html[data-theme="apple"] .g-nav{
background: var(--navBg);
border-bottom: 1px solid rgba(0,0,0,.08);
backdrop-filter: saturate(160%) blur(10px);
-webkit-backdrop-filter:saturate(160%) blur(10px);
}
html[data-theme="apple"] .g-nav.shrink{ background: var(--navBgSolid); }
html[data-theme="apple"] .brand{ color: var(--txt) !important; }
html[data-theme="apple"] .nav-links > a,
html[data-theme="apple"] .nav-links > .dd > a{
color: var(--txt) !important;
}
html[data-theme="apple"] .nav-links > a:hover,
html[data-theme="apple"] .nav-links > .dd:hover > a{
border-color: rgba(0,0,0,.12);
background: rgba(0,0,0,.03);
}
/* Dropdown */
html[data-theme="apple"] .dd-menu{
background: var(--navBgSolid);
border: 1px solid rgba(0,0,0,.10);
box-shadow: var(--shadow);
}
html[data-theme="apple"] .dd-menu a{ color: var(--txt) !important; }
html[data-theme="apple"] .dd-menu a:hover{ background: rgba(0,0,0,.04); }
html[data-theme="apple"] .lang-switch a{
color: var(--txt) !important;
border-color: rgba(0,0,0,.12);
background: rgba(255,255,255,.60);
}
html[data-theme="apple"] .lang-switch a:hover{ background: rgba(255,255,255,.92); }
/* CTA stays blue gradient */
html[data-theme="apple"] .nav-cta{
background: linear-gradient(135deg, var(--acc1), var(--acc2));
color: #fff !important;
box-shadow: var(--shadow);
}
/* Mobile menu button */
html[data-theme="apple"] .sp-toggle button{
border-color: rgba(0,0,0,.14);
color: var(--txt);
background: rgba(255,255,255,.70);
}
/* Drawer */
@media (max-width: 960px){
html[data-theme="apple"] .drawer{ background: rgba(0,0,0,.35); }
html[data-theme="apple"] .drawer-panel{
background: rgba(255,255,255,.96);
border-left: 1px solid rgba(0,0,0,.10);
box-shadow: -20px 0 40px rgba(0,0,0,.18);
}
html[data-theme="apple"] .drawer a{
color: var(--txt) !important;
border-bottom-color: rgba(0,0,0,.08);
}
html[data-theme="apple"] .drawer .group-title{ color: var(--muted); }
html[data-theme="apple"] .drawer .close{
background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.86));
}
html[data-theme="apple"] .drawer .close button{
border-color: rgba(0,0,0,.14);
background: rgba(255,255,255,.90);
color: var(--txt);
}
html[data-theme="apple"] .acc-link,
html[data-theme="apple"] .acc-btn{
border-color: rgba(0,0,0,.12);
background: rgba(0,0,0,.02);
color: var(--txt);
}
}
/* Hero: keep your background image, make overlays light */
html[data-theme="apple"] .hero{
border-bottom: 1px solid rgba(0,0,0,.08) !important;
}
/* If jig_style adds scanlines / vignettes via ::before/::after, soften them */
html[data-theme="apple"] .hero::before{
opacity: .10 !important;
mix-blend-mode: normal !important;
}
html[data-theme="apple"] .hero::after{
background: radial-gradient(120% 80% at 50% -10%,
rgba(255,255,255,0) 0%,
rgba(245,245,247,.40) 60%,
rgba(245,245,247,.70) 100%) !important;
}
/* Neon lines: reduce intensity so it doesn't look "dark-site" */
html[data-theme="apple"] .neon-lines::before,
html[data-theme="apple"] .neon-lines::after{
opacity: .22 !important;
filter: drop-shadow(0 0 10px rgba(41,151,255,.55)) !important;
background: linear-gradient(90deg, transparent, rgba(0,113,227,0), rgba(0,113,227,.85), rgba(41,151,255,.85), rgba(0,113,227,0), transparent) !important;
}
/* Hero text */
html[data-theme="apple"] .hero .title{ color: var(--txt) !important; }
html[data-theme="apple"] .hero .lead{ color: var(--muted) !important; }
/* Cards: light */
html[data-theme="apple"] .card{
background: rgba(255,255,255,.86) !important;
border: 1px solid rgba(0,0,0,.10) !important;
box-shadow: var(--shadow) !important;
}
html[data-theme="apple"] .card-title,
html[data-theme="apple"] .card-title a{ color: var(--txt) !important; }
html[data-theme="apple"] .card-more{ opacity: 1 !important; color: var(--muted) !important; }
/* Body links: readable */
html[data-theme="apple"] a,
html[data-theme="apple"] a:visited{ color: var(--acc1) !important; }
html[data-theme="apple"] a:hover{ color:#005bbf !important; }
/* Footer */
html[data-theme="apple"] footer{ color: var(--muted) !important; }
html[data-theme="apple"] footer .copyright{
color: rgba(29,29,31,.64) !important;
}
/* === Fix: header brand + specific links should be black (not Apple blue) === */
/* Brand text next to logo */
html[data-theme="apple"] .brand,
html[data-theme="apple"] .brand a,
html[data-theme="apple"] .brand .name{
color: var(--txt) !important;
}
/* Card footer "Read More" should be black */
html[data-theme="apple"] .card-more a,
html[data-theme="apple"] .card-more a:visited{
color: var(--txt) !important;
}
html[data-theme="apple"] .card-more a:hover{
color: #000 !important;
}
/* Safety: if the card title link is not covered by .card-title rules */
html[data-theme="apple"] .card h3 a,
html[data-theme="apple"] .card h3 a:visited{
color: var(--txt) !important;
}
/* === Hero text glow on jigdesign01.webp ===
Applies only to the hero title/lead text.
*/
/* Main hero title glow */
html[data-theme="apple"] .hero .title{
color: #ffffff !important;
text-shadow:
0 0 10px rgba(41,151,255,.55),
0 0 22px rgba(0,113,227,.40),
0 10px 26px rgba(0,0,0,.45);
}
/* Hero lead glow (subtle) */
html[data-theme="apple"] .hero .lead{
color: rgba(255,255,255,.92) !important;
text-shadow:
0 0 8px rgba(41,151,255,.35),
0 0 18px rgba(0,113,227,.22),
0 10px 22px rgba(0,0,0,.40);
}
/* ================================
Header link color rule (force black)
- Only "お問い合わせ" (.nav-cta) stays white
- Everything else in header becomes black
================================ */
/* Header (desktop) */
html[data-theme="apple"] nav.g-nav a,
html[data-theme="apple"] nav.g-nav a:visited{
color: var(--txt) !important;
}
/* Dropdown */
html[data-theme="apple"] nav.g-nav .dd-menu a,
html[data-theme="apple"] nav.g-nav .dd-menu a:visited{
color: var(--txt) !important;
}
/* Language switch */
html[data-theme="apple"] nav.g-nav .lang-switch a,
html[data-theme="apple"] nav.g-nav .lang-switch a:visited{
color: var(--txt) !important;
}
/* Mobile drawer */
html[data-theme="apple"] .drawer-panel a,
html[data-theme="apple"] .drawer-panel a:visited{
color: var(--txt) !important;
}
/* Exceptions: CTA buttons stay white */
html[data-theme="apple"] nav.g-nav a.nav-cta,
html[data-theme="apple"] nav.g-nav a.nav-cta:visited,
html[data-theme="apple"] nav.g-nav a.tel-cta.nav-cta,
html[data-theme="apple"] nav.g-nav a.tel-cta.nav-cta:visited{
color: #ffffff !important;
}
/* Keep hover subtle (not blue) */
html[data-theme="apple"] nav.g-nav a:hover{
color: #000 !important;
}