:root{ --bg:#08060a; --panel:#0f0a10; --panel2:#161019; --line:rgba(255,255,255,.10); --line-pink:rgba(238,77,157,.42); --text:#fff8fc; --muted:#9b8e98; --pink:#ef4fa1; --pink2:#ff8bc8; --purple:#8e4fb5; --gold:#e7bd63; --silver:#d8dce7; --green:#2eff8c; --max:1560px; --cut:10px; } *{ box-sizing:border-box; } html{ background:var(--bg); } body{ margin:0; min-height:100vh; overflow-x:hidden; color:var(--text); background: radial-gradient(circle at 78% 10%,rgba(232,60,152,.13),transparent 26%), radial-gradient(circle at 15% 26%,rgba(132,54,138,.16),transparent 30%), linear-gradient(145deg,#070609,#110912 62%,#08070c); font-family:Inter,"Yu Gothic",system-ui,sans-serif; } button, a{ -webkit-tap-highlight-color:transparent; } .sf-grid-bg, .sf-scanlines{ position:fixed; inset:0; pointer-events:none; } .sf-grid-bg{ z-index:-2; opacity:.19; background-image: linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px); background-size:64px 64px; } .sf-scanlines{ z-index:50; opacity:.11; mix-blend-mode:screen; background:repeating-linear-gradient( 180deg, transparent 0, transparent 3px, rgba(255,255,255,.018) 4px ); } .sf-site-header{ width:min(var(--max),calc(100% - 36px)); min-height:112px; margin:auto; display:grid; grid-template-columns:230px minmax(0,1fr) auto; align-items:center; gap:28px; border-bottom:1px solid var(--line-pink); } .sf-brand{ width:210px; } .sf-brand img{ display:block; width:100%; height:auto; } .sf-site-title small{ display:block; color:#e2a1c3; font-family:Georgia,serif; font-size:13px; letter-spacing:.17em; } .sf-site-title strong{ display:block; margin-top:2px; font-family:Georgia,serif; font-size:clamp(1.65rem,2.6vw,2.45rem); letter-spacing:.065em; } .sf-site-title span{ display:block; margin-top:5px; color:#9f939d; font-size:8px; letter-spacing:.19em; } .sf-header-right{ display:flex; align-items:center; gap:8px; } .sf-header-right a, .sf-classified{ min-height:38px; padding:0 12px; display:flex; align-items:center; color:#d6cad3; border:1px solid var(--line); text-decoration:none; font-size:8px; font-weight:900; letter-spacing:.09em; } .sf-classified{ color:#ffd071; border-color:rgba(255,205,93,.33); background:rgba(91,59,0,.12); } .sf-tabs{ min-height:52px; display:flex; align-items:stretch; overflow-x:auto; border-bottom:1px solid var(--line-pink); background:rgba(4,4,7,.64); } .sf-tabs a, .sf-tabs > span:not(.sf-tabs-brand){ min-width:190px; padding:0 28px; display:flex; align-items:center; justify-content:center; flex:0 0 auto; color:#aa9daa; border-right:1px solid var(--line); text-decoration:none; font-family:Georgia,serif; font-size:13.3333px; letter-spacing:.11em; } .sf-tabs .is-active{ color:#fff; background:linear-gradient(110deg,rgba(237,102,172,.75),rgba(151,73,137,.38)); box-shadow:inset 0 -2px var(--pink); } .sf-tabs-brand{ margin-left:auto; padding:0 26px; display:flex; align-items:center; gap:12px; color:#8d818a; font-size:8px; letter-spacing:.16em; white-space:nowrap; } .sf-tabs-brand b{ width:28px; height:28px; display:grid; place-items:center; color:#ff82be; border:1px solid rgba(255,130,190,.32); border-radius:5px; } .sf-main{ width:min(var(--max),calc(100% - 36px)); margin:18px auto 80px; } .sf-hero{ position:relative; min-height:430px; overflow:hidden; display:grid; grid-template-columns:minmax(420px,.82fr) minmax(520px,1.18fr); border:1px solid rgba(240,77,164,.35); background:#0b080c; box-shadow:0 24px 80px rgba(0,0,0,.35); } .sf-hero::before{ content:""; position:absolute; inset:0; pointer-events:none; z-index:2; background: linear-gradient(90deg,rgba(7,5,8,.98) 0%,rgba(8,5,9,.91) 31%,rgba(8,5,9,.18) 60%,rgba(8,5,9,.12) 100%), linear-gradient(180deg,transparent 75%,rgba(7,5,8,.88)); } .sf-hero-copy{ position:relative; z-index:4; padding:46px 26px 46px 58px; align-self:center; } .sf-eyebrow{ color:#ff79b9; font-weight:900; letter-spacing:.18em; } .sf-hero h1{ margin:8px 0 0; font-family:Impact,Haettenschweiler,"Arial Narrow Bold",sans-serif; font-size:clamp(4.1rem,8.4vw,8.4rem); line-height:.78; letter-spacing:.012em; text-transform:uppercase; text-shadow: 0 4px 0 rgba(255,255,255,.08), 0 0 24px rgba(255,70,161,.18); } .sf-hero h1 span{ display:block; color:#fff; } .sf-signature{ margin:5px 0 10px 42%; color:#ff6db4; font-family:"Segoe Script","Brush Script MT",cursive; font-size:clamp(2rem,4vw,4rem); transform:rotate(-6deg); text-shadow:0 0 18px rgba(255,87,173,.34); } .sf-hero-lead{ margin:12px 0 5px; font-family:Georgia,"Yu Mincho",serif; font-size:clamp(1rem,1.8vw,1.7rem); line-height:1.7; } .sf-hero-copy-small{ max-width:560px; margin:7px 0 0; color:#bbacb7; font-size:10px; line-height:1.8; } .sf-hero-tags{ margin-top:26px; display:flex; flex-wrap:wrap; gap:8px; } .sf-hero-tags span{ padding:5px 8px; color:#af9da9; border-left:2px solid var(--pink); background:rgba(255,255,255,.025); font-size:7px; font-weight:900; letter-spacing:.11em; } .sf-hero-art{ position:absolute; inset:0 0 0 35%; z-index:1; background: linear-gradient(90deg,rgba(8,5,9,.35),transparent 28%), url("/assets/images/special-forces-hero-v11.png") center right / cover no-repeat; filter:saturate(.94) contrast(1.04) brightness(.88); } .sf-hero-status{ position:absolute; right:28px; top:35px; z-index:5; display:grid; grid-template-columns:auto auto; gap:5px 12px; align-items:center; color:#e4a0c2; font-size:8px; letter-spacing:.13em; } .sf-hero-status b{ grid-row:1/3; grid-column:2; color:#ff4fa4; font-size:28px; font-weight:300; } .sf-hero-status small{ color:#b08f9f; font-size:7px; } .sf-panel{ margin-top:14px; overflow:hidden; border:1px solid rgba(255,255,255,.12); background: linear-gradient(150deg,rgba(20,14,22,.96),rgba(8,7,10,.97)); box-shadow:0 18px 50px rgba(0,0,0,.20); } .sf-panel-head{ min-height:56px; padding:10px 14px; display:flex; align-items:center; justify-content:space-between; gap:18px; border-bottom:1px solid rgba(255,255,255,.08); background:linear-gradient(90deg,rgba(255,255,255,.025),transparent); } .sf-panel-head > div{ display:flex; align-items:baseline; gap:9px; min-width:0; } .sf-panel-head h2{ margin:0; font-family:Georgia,serif; font-size:17px; letter-spacing:.075em; white-space:nowrap; } .sf-panel-head small{ color:#a996a4; font-size:8px; letter-spacing:.1em; } .sf-panel-head p{ margin:0; color:#736871; font-size:7px; line-height:1.5; letter-spacing:.08em; } .sf-panel-icon{ color:#ff5fae; font-size:14px; font-weight:900; } .sf-live{ color:#b79cac; font-size:7px; letter-spacing:.14em; white-space:nowrap; } .sf-rank-grid{ padding:12px; display:grid; grid-template-columns:repeat(3,1fr); gap:10px; } .sf-rank-card{ position:relative; min-height:190px; padding:22px 20px 16px 126px; overflow:hidden; border:1px solid rgba(255,255,255,.16); background: radial-gradient(circle at 100% 50%,rgba(255,255,255,.05),transparent 45%), linear-gradient(145deg,#16131a,#09080b 66%); } .sf-rank-card::before, .sf-rank-card::after{ content:""; position:absolute; pointer-events:none; } .sf-rank-card::before{ inset:6px; border:1px solid currentColor; opacity:.22; } .sf-rank-card::after{ left:0; right:0; bottom:0; height:2px; background:currentColor; box-shadow:0 0 20px currentColor; } .sf-rank-card.rank-100k{ color:#e4e8f0; } .sf-rank-card.rank-200k{ color:#ecc568; } .sf-rank-card.rank-300k{ color:#ff63b7; } .sf-rank-index{ position:absolute; right:14px; top:12px; color:#80727d; font-family:Georgia,serif; } .sf-rank-medal{ position:absolute; left:24px; top:36px; width:82px; height:82px; display:grid; place-items:center; clip-path:polygon(50% 0,63% 15%,83% 12%,88% 33%,100% 50%,87% 66%,84% 88%,62% 85%,50% 100%,36% 85%,14% 88%,12% 65%,0 50%,13% 34%,16% 12%,37% 15%); border:1px solid currentColor; background: radial-gradient(circle at 50% 45%,rgba(255,255,255,.86),rgba(255,255,255,.08) 18%,transparent 20%), linear-gradient(145deg,rgba(255,255,255,.18),rgba(255,255,255,.035)); color:inherit; font-size:34px; text-shadow:0 0 18px currentColor; filter:drop-shadow(0 0 12px currentColor); } .sf-rank-card small{ display:block; color:inherit; font-family:Georgia,serif; font-size:16px; font-weight:900; letter-spacing:.05em; } .sf-rank-card h3{ margin:12px 0 1px; color:#fff; font-family:Georgia,serif; font-size:30px; } .sf-rank-card b{ color:#dfc9d7; font-size:8px; letter-spacing:.15em; } .sf-rank-card p{ margin:14px 0 0; color:#9c8f98; font-size:8px; line-height:1.5; } .sf-layout{ display:grid; grid-template-columns:minmax(0,1.55fr) minmax(330px,.72fr); gap:14px; } .sf-roster-filters{ padding:10px 12px; display:flex; gap:6px; overflow-x:auto; border-bottom:1px solid rgba(255,255,255,.08); } .sf-roster-filters button{ min-height:34px; padding:0 14px; flex:0 0 auto; color:#a89aa5; border:1px solid rgba(255,255,255,.12); background:#09070a; font-family:Georgia,serif; font-size:8px; cursor:pointer; } .sf-roster-filters button.is-active{ color:#fff; border-color:#ff5bab; background:linear-gradient(90deg,#e64599,#a44185); box-shadow:0 0 18px rgba(238,67,157,.20); } .sf-roster-total{ color:#82757e; font-size:7px; letter-spacing:.13em; } .sf-roster-total strong{ margin-left:8px; color:#fff; font-family:Georgia,serif; font-size:19px; } .sf-roster-total span{ margin-left:7px; color:#f051a2; } .sf-roster-head, .sf-roster-row{ display:grid; grid-template-columns:42px minmax(140px,1.35fr) minmax(130px,.8fr) minmax(90px,.65fr) minmax(100px,.7fr) 72px; align-items:center; gap:8px; } .sf-roster-head{ min-height:34px; padding:0 12px; color:#847883; border-bottom:1px solid rgba(255,255,255,.08); font-size:7px; letter-spacing:.08em; } .sf-roster-row{ min-height:64px; padding:7px 12px; border-bottom:1px solid rgba(255,255,255,.065); background:rgba(255,255,255,.008); } .sf-roster-row:hover{ background:linear-gradient(90deg,rgba(231,66,153,.16),rgba(231,66,153,.02)); } .sf-roster-row:last-child{ border-bottom:0; } .sf-op-index{ color:#736773; font-family:monospace; font-size:8px; } .sf-operator{ min-width:0; display:flex; align-items:center; gap:10px; } .sf-avatar{ width:36px; height:36px; flex:0 0 36px; display:grid; place-items:center; overflow:hidden; border:1px solid rgba(255,96,177,.45); border-radius:50%; background:linear-gradient(145deg,#7f3c72,#21141f); font-family:Georgia,serif; font-weight:900; } .sf-avatar img{ width:100%; height:100%; object-fit:cover; } .sf-operator strong{ min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size:10px; } .sf-class-badge{ display:inline-flex; align-items:center; width:max-content; max-width:100%; min-height:26px; padding:0 8px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; border:1px solid currentColor; border-radius:12px; font-family:Georgia,serif; font-size:7px; font-weight:900; } .sf-class-badge.tier-100k{ color:#dfe3ec; background:rgba(218,224,237,.05); } .sf-class-badge.tier-200k{ color:#e7c066; background:rgba(232,190,88,.06); } .sf-class-badge.tier-300k{ color:#ff6db8; background:rgba(237,69,159,.08); } .sf-threshold, .sf-certified{ color:#bfa9b7; font-size:8px; } .sf-status{ color:var(--green); font-size:7px; font-weight:900; letter-spacing:.08em; } .sf-status::before{ content:""; display:inline-block; width:6px; height:6px; margin-right:5px; border-radius:50%; background:currentColor; box-shadow:0 0 10px currentColor; } .sf-empty{ min-height:110px; display:grid; place-items:center; color:#756a73; font-size:9px; letter-spacing:.1em; } .sf-operation-card{ margin:12px; padding:18px; display:grid; grid-template-columns:minmax(0,1.45fr) minmax(220px,.85fr); gap:14px; border:1px solid rgba(239,75,163,.30); background: linear-gradient(rgba(8,7,10,.70),rgba(8,7,10,.89)), radial-gradient(circle at 78% 40%,rgba(239,67,158,.17),transparent 35%); } .sf-operation-card small{ color:#e067a4; font-size:7px; letter-spacing:.12em; } .sf-operation-card h3{ margin:4px 0 0; font-family:Georgia,serif; font-size:24px; letter-spacing:.04em; } .sf-operation-card > div > span{ color:#b89ba9; font-size:9px; } .sf-operation-target{ padding-left:14px; border-left:1px solid rgba(255,255,255,.08); } .sf-operation-target p{ margin:5px 0 0; color:#a4949f; font-size:9px; line-height:1.7; } .sf-operation-checks{ grid-column:1/-1; display:flex; flex-wrap:wrap; gap:8px 14px; padding-top:13px; border-top:1px solid rgba(255,255,255,.07); } .sf-operation-checks span{ color:#938590; font-size:8px; } .sf-operation-checks .is-on{ color:#f085ba; } .sf-benefit-list{ padding:10px; display:grid; gap:6px; } .sf-benefit-list article{ min-height:58px; padding:9px 10px; display:grid; grid-template-columns:38px minmax(0,1fr) 24px; gap:9px; align-items:center; border:1px solid rgba(255,255,255,.08); background:linear-gradient(90deg,rgba(234,66,152,.08),rgba(255,255,255,.015)); } .sf-benefit-list article > b{ width:34px; height:34px; display:grid; place-items:center; color:#ff8bc4; border:1px solid rgba(255,92,173,.30); background:rgba(219,60,144,.10); } .sf-benefit-list strong{ display:block; font-size:9px; letter-spacing:.06em; } .sf-benefit-list span{ display:block; margin-top:2px; color:#8f818b; font-size:7px; } .sf-benefit-list i{ color:#c64b89; font-style:normal; font-size:8px; } .sf-dogtag-art{ min-height:310px; margin:10px; border:1px solid rgba(255,255,255,.09); background: linear-gradient(180deg,transparent 72%,rgba(6,5,8,.32)), url("/assets/images/special-forces-dogtag-v11.png") center / cover no-repeat; } .sf-footer{ width:min(var(--max),calc(100% - 36px)); min-height:62px; margin:auto; display:flex; align-items:center; justify-content:space-between; gap:18px; color:#776b75; border-top:1px solid rgba(255,255,255,.07); font-size:8px; letter-spacing:.09em; } @media(max-width:1100px){ .sf-hero{ grid-template-columns:1fr; } .sf-hero-art{ inset:0; opacity:.75; } .sf-hero-copy{ max-width:650px; } .sf-rank-card{ padding-left:100px; } .sf-rank-medal{ left:14px; width:70px; height:70px; } .sf-layout{ grid-template-columns:1fr; } .sf-right-column{ display:grid; grid-template-columns:1fr 1fr; gap:14px; } } @media(max-width:760px){ .sf-site-header{ width:calc(100% - 20px); min-height:84px; grid-template-columns:minmax(0,1fr) auto; gap:8px; } .sf-brand{ width:145px; } .sf-site-title{ display:none; } .sf-header-right{ gap:5px; } .sf-classified{ display:none; } .sf-header-right a{ padding:0 8px; font-size:7px; } .sf-tabs a, .sf-tabs > span:not(.sf-tabs-brand){ min-width:120px; padding:0 15px; font-size:9px; } .sf-tabs-brand{ display:none; } .sf-main{ width:calc(100% - 20px); margin-top:10px; } .sf-hero{ min-height:500px; display:block; } .sf-hero::before{ background: linear-gradient(180deg,rgba(6,4,7,.16),rgba(6,4,7,.74) 54%,rgba(6,4,7,.97) 100%); } .sf-hero-art{ inset:0; background-position:62% top; opacity:.80; } .sf-hero-copy{ position:absolute; left:0; right:0; bottom:0; padding:28px 18px 25px; } .sf-hero h1{ font-size:clamp(3.5rem,18vw,5.6rem); } .sf-signature{ margin-left:25%; } .sf-hero-status{ right:14px; top:13px; } .sf-rank-grid{ grid-template-columns:1fr; } .sf-rank-card{ min-height:170px; } .sf-panel-head{ align-items:flex-start; } .sf-panel-head > div{ flex-wrap:wrap; } .sf-panel-head p{ display:none; } .sf-roster-head{ display:none; } .sf-roster-row{ grid-template-columns:30px 1fr auto; grid-template-areas: "idx operator status" ". class class" ". threshold certified"; min-height:104px; gap:8px 10px; } .sf-op-index{ grid-area:idx; } .sf-operator{ grid-area:operator; } .sf-class-badge{ grid-area:class; } .sf-threshold{ grid-area:threshold; } .sf-certified{ grid-area:certified; text-align:right; } .sf-status{ grid-area:status; text-align:right; } .sf-operation-card{ grid-template-columns:1fr; } .sf-operation-target{ padding-left:0; padding-top:12px; border-left:0; border-top:1px solid rgba(255,255,255,.08); } .sf-right-column{ display:block; } .sf-dogtag-art{ min-height:280px; } .sf-footer{ width:calc(100% - 20px); padding:14px 0; flex-direction:column; align-items:flex-start; } } @media(max-width:420px){ .sf-hero{ min-height:520px; } .sf-hero-lead{ font-size:15px; } .sf-hero-copy-small{ font-size:9px; } .sf-rank-card{ padding:96px 14px 15px; text-align:center; } .sf-rank-medal{ top:16px; left:50%; transform:translateX(-50%); } .sf-rank-index{ right:10px; } .sf-rank-card h3{ font-size:28px; } .sf-dogtag-art{ min-height:230px; } } @media(prefers-reduced-motion:reduce){ *, *::before, *::after{ scroll-behavior:auto !important; animation:none !important; transition:none !important; } } /* ========================================================= YUKINON SPECIAL FORCES V1.2 VISUAL FIDELITY PASS concept image alignment ========================================================= */ /* --------------------------------------------------------- GLOBAL COMMAND CENTER --------------------------------------------------------- */ body{ background: radial-gradient( circle at 78% 7%, rgba(255,32,137,.14), transparent 27% ), radial-gradient( circle at 13% 42%, rgba(124,36,123,.17), transparent 34% ), linear-gradient( 145deg, #050406, #100710 56%, #07050a ); } .sf-main{ max-width: 1600px; } /* tactical panel corners */ .sf-panel{ position:relative; border-color: rgba(240,73,159,.28); box-shadow: inset 0 0 0 1px rgba(255,255,255,.015), 0 15px 50px rgba(0,0,0,.34); } .sf-panel::before, .sf-panel::after{ content:""; position:absolute; z-index:6; width:22px; height:22px; pointer-events:none; } .sf-panel::before{ left:5px; top:5px; border-left: 2px solid rgba(255,88,176,.75); border-top: 2px solid rgba(255,88,176,.75); } .sf-panel::after{ right:5px; bottom:5px; border-right: 2px solid rgba(255,88,176,.44); border-bottom: 2px solid rgba(255,88,176,.44); } /* --------------------------------------------------------- HERO - concept image closer --------------------------------------------------------- */ .sf-hero{ min-height: 500px; border-color: rgba(247,74,165,.52); background: #070508; box-shadow: 0 26px 75px rgba(0,0,0,.52), inset 0 -1px rgba(255,91,178,.38); } .sf-hero-art{ inset: 0 0 0 26%; background-position: center 38%; filter: saturate(1.08) contrast(1.10) brightness(.90); } .sf-hero::before{ background: linear-gradient( 90deg, rgba(5,4,7,1) 0%, rgba(6,4,7,.96) 25%, rgba(6,4,7,.64) 42%, rgba(6,4,7,.06) 72%, rgba(6,4,7,.18) 100% ), linear-gradient( 180deg, rgba(0,0,0,.02), rgba(4,3,6,.08) 55%, rgba(5,3,7,.74) 100% ); } /* HUD targeting guides */ .sf-hero::after{ content:""; position:absolute; z-index:3; left:31%; top:50%; width:78px; height:78px; transform: translate(-50%,-50%); border: 1px solid rgba(255,87,174,.34); border-radius: 50%; box-shadow: 0 0 25px rgba(255,67,159,.12); background: linear-gradient( transparent calc(50% - .5px), rgba(255,86,171,.35) 50%, transparent calc(50% + .5px) ), linear-gradient( 90deg, transparent calc(50% - .5px), rgba(255,86,171,.35) 50%, transparent calc(50% + .5px) ); pointer-events:none; } .sf-hero-copy{ padding: 55px 32px 54px 62px; } .sf-eyebrow{ font-size: 11px; letter-spacing: .22em; } .sf-hero h1{ margin-top: 14px; font-size: clamp( 5rem, 8.8vw, 9rem ); line-height: .76; letter-spacing: .018em; filter: drop-shadow( 0 7px 0 rgba(52,10,33,.45) ); } .sf-hero h1 span{ position:relative; } .sf-hero h1 span::after{ content:""; position:absolute; left:54%; top:50%; width:78px; height:1px; background: #ff4fa5; box-shadow: 0 0 12px #ff4fa5; } .sf-signature{ color: #ff58ad; font-size: clamp( 2.3rem, 4vw, 4.5rem ); } .sf-hero-lead{ max-width: 420px; font-size: 18px; font-weight: 700; } .sf-hero-copy-small{ max-width: 480px; } .sf-hero-tags{ margin-top: 31px; max-width: 410px; } .sf-hero-tags span{ position:relative; padding: 6px 12px; border: 1px solid rgba(255,255,255,.07); border-left: 2px solid #ff4fa5; background: rgba(3,3,5,.48); } /* --------------------------------------------------------- SECTION HEADER --------------------------------------------------------- */ .sf-panel-head{ background: linear-gradient( 90deg, rgba(227,56,145,.07), rgba(255,255,255,.01) 48%, transparent ); } .sf-panel-head h2{ font-size: 18px; text-shadow: 0 0 14px rgba(255,255,255,.08); } .sf-panel-icon{ color: #ff55aa; text-shadow: 0 0 12px rgba(255,65,159,.75); } /* --------------------------------------------------------- ELITE RANK CARDS --------------------------------------------------------- */ .sf-rank-grid{ padding: 16px; gap: 14px; } .sf-rank-card{ min-height: 210px; padding: 27px 22px 18px 142px; clip-path: polygon( 13px 0, 100% 0, 100% calc(100% - 13px), calc(100% - 13px) 100%, 0 100%, 0 13px ); background: linear-gradient( 145deg, rgba(255,255,255,.07), rgba(255,255,255,.015) 30%, rgba(3,3,5,.94) ); } .sf-rank-card::before{ inset: 7px; clip-path: polygon( 10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px ); } .sf-rank-medal{ left: 28px; top: 47px; width: 90px; height: 90px; background: radial-gradient( circle at center, #fff 0%, currentColor 8%, rgba(255,255,255,.17) 22%, rgba(0,0,0,.42) 66% ), linear-gradient( 135deg, rgba(255,255,255,.34), rgba(255,255,255,.02) ); border: 2px solid currentColor; } .rank-100k .sf-rank-medal{ filter: drop-shadow( 0 0 14px rgba(220,228,245,.40) ); } .rank-200k .sf-rank-medal{ filter: drop-shadow( 0 0 18px rgba(235,189,76,.52) ); } .rank-300k .sf-rank-medal{ filter: drop-shadow( 0 0 20px rgba(255,68,166,.72) ); } .sf-rank-card small{ font-size: 18px; } .sf-rank-card h3{ margin-top: 13px; font-size: 34px; letter-spacing: .04em; } .rank-300k{ box-shadow: inset 0 0 34px rgba(224,50,145,.08), 0 0 23px rgba(225,48,147,.08); } /* --------------------------------------------------------- COMMAND DECK --------------------------------------------------------- */ .sf-layout{ gap: 16px; grid-template-columns: minmax(0,1.60fr) minmax(350px,.68fr); } .sf-left-column, .sf-right-column{ min-width: 0; } /* --------------------------------------------------------- ROSTER --------------------------------------------------------- */ .sf-roster-panel{ background: linear-gradient( 155deg, rgba(21,13,23,.98), rgba(6,5,8,.98) ); } .sf-roster-filters{ background: rgba(3,3,5,.54); } .sf-roster-filters button{ border-radius: 2px; } .sf-roster-row{ position: relative; min-height: 68px; } .sf-roster-row::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:2px; background: transparent; } .sf-roster-row:hover::before{ background: #f34b9f; box-shadow: 0 0 11px #f34b9f; } .sf-status{ text-shadow: 0 0 7px rgba(40,255,137,.58); } /* --------------------------------------------------------- OPERATION BRIEFING --------------------------------------------------------- */ .sf-operation-card{ position:relative; overflow:hidden; min-height: 230px; background: linear-gradient( 90deg, rgba(7,5,9,.93), rgba(7,5,9,.73) ), radial-gradient( circle at 75% 40%, rgba(240,54,152,.25), transparent 29% ); } .sf-operation-card::before{ content:""; position:absolute; inset:0; opacity:.20; pointer-events:none; background-image: linear-gradient( rgba(255,255,255,.08) 1px, transparent 1px ), linear-gradient( 90deg, rgba(255,255,255,.07) 1px, transparent 1px ); background-size: 34px 34px; } .sf-operation-card::after{ content:"+"; position:absolute; right:15%; top:25%; color: #ff55aa; font-size: 36px; text-shadow: 0 0 15px #ff55aa; } .sf-operation-card > *{ position:relative; z-index:2; } /* --------------------------------------------------------- BENEFITS --------------------------------------------------------- */ .sf-benefits-panel{ background: linear-gradient( 160deg, rgba(28,15,26,.98), rgba(7,5,8,.99) ); } .sf-benefit-list article{ position:relative; overflow:hidden; } .sf-benefit-list article::after{ content:""; position:absolute; right:-20px; top:-25px; width: 60px; height: 110px; transform: rotate(20deg); background: linear-gradient( rgba(255,79,167,.08), transparent ); } .sf-benefit-list article > b{ box-shadow: 0 0 13px rgba(255,74,165,.10); } /* --------------------------------------------------------- DOG TAG --------------------------------------------------------- */ .sf-dogtag-panel{ background: linear-gradient( 150deg, rgba(22,14,22,.96), rgba(5,4,7,.98) ); } .sf-dogtag-art{ min-height: 360px; border-color: rgba(241,71,159,.22); background-size: cover; background-position: center 43%; box-shadow: inset 0 0 60px rgba(0,0,0,.24); } /* --------------------------------------------------------- subtle command-line labels --------------------------------------------------------- */ .sf-ranks-panel::after{ content:"CLASSIFIED // PALMU SUPPORT COMMAND"; position:absolute; right:14px; bottom:7px; width:auto; height:auto; border:0; color: rgba(222,99,162,.31); font-size: 6px; letter-spacing: .17em; } /* ========================================================= TABLET ========================================================= */ @media(max-width:1100px){ .sf-hero{ min-height: 520px; } .sf-hero-art{ inset:0; } .sf-hero-copy{ max-width: 720px; } .sf-rank-card{ padding-left: 112px; } .sf-rank-medal{ left: 17px; width: 76px; height: 76px; } } /* ========================================================= iPHONE ========================================================= */ @media(max-width:760px){ .sf-hero{ min-height: 610px; } .sf-hero-art{ background-position: 63% top; } .sf-hero-copy{ padding: 30px 18px 29px; } .sf-hero h1{ font-size: clamp( 4rem, 20vw, 6rem ); } .sf-hero h1 span::after{ display:none; } .sf-hero-lead{ font-size: 16px; } .sf-hero-status{ top: 14px; right: 12px; } .sf-rank-grid{ padding: 10px; } .sf-rank-card{ min-height: 180px; padding: 25px 15px 16px 112px; } .sf-rank-card small{ font-size: 15px; } .sf-rank-card h3{ font-size: 29px; } .sf-rank-medal{ left: 18px; top: 44px; width: 73px; height: 73px; } .sf-panel-head h2{ font-size: 15px; } .sf-dogtag-art{ min-height: 310px; } } /* ========================================================= SMALL iPHONE ========================================================= */ @media(max-width:420px){ .sf-hero{ min-height: 635px; } .sf-hero-tags{ gap: 5px; } .sf-rank-card{ padding: 105px 14px 17px; text-align: center; } .sf-rank-medal{ top: 18px; left: 50%; transform: translateX(-50%); } } /* ========================================================= YUKINON SPECIAL FORCES V1.2.1 RESPONSIVE STRUCTURE FIX ========================================================= */ /* --------------------------------------------------------- TABLET / iPHONE LANDSCAPE 下段レイアウトを強制的に1カラム化 --------------------------------------------------------- */ @media(max-width:1180px){ .sf-layout{ display:grid !important; grid-template-columns: minmax(0,1fr) !important; gap: 14px !important; width: 100% !important; min-width: 0 !important; } .sf-left-column, .sf-right-column{ width: 100% !important; min-width: 0 !important; max-width: 100% !important; } /* * 横向きiPhone / tabletでは * BENEFITS と DOG TAG は2列 */ .sf-right-column{ display:grid !important; grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important; gap: 14px !important; } .sf-right-column .sf-panel{ width: 100% !important; min-width: 0 !important; max-width: 100% !important; margin-top: 0 !important; } .sf-roster-panel, .sf-operation-panel{ width: 100% !important; min-width: 0 !important; max-width: 100% !important; } } /* ========================================================= iPHONE PORTRAIT 全セクションを完全な縦積みへ ========================================================= */ @media(max-width:760px){ .sf-layout{ display:block !important; width: 100% !important; min-width: 0 !important; } .sf-left-column, .sf-right-column{ display:block !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; } .sf-layout .sf-panel{ display:block; width: 100% !important; min-width: 0 !important; max-width: 100% !important; margin: 14px 0 0 !important; } /* ------------------------------------------------------- MOBILE NAV 5項目を1画面に収める ------------------------------------------------------- */ .sf-tabs{ display:grid !important; grid-template-columns: repeat(5,minmax(0,1fr)) !important; width: 100%; overflow: hidden !important; } .sf-tabs a, .sf-tabs > span:not(.sf-tabs-brand){ min-width: 0 !important; width: auto !important; padding: 0 3px !important; font-size: 7px !important; letter-spacing: .04em !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* PALMU × YUKINONはモバイルでは非表示 */ .sf-tabs-brand{ display: none !important; } /* ------------------------------------------------------- ROSTER ------------------------------------------------------- */ .sf-roster-panel{ overflow: hidden !important; } .sf-roster-filters{ width: 100%; max-width: 100%; overflow-x: auto; } .sf-roster-row{ width: 100% !important; max-width: 100% !important; overflow: hidden; } /* ------------------------------------------------------- BENEFITS ------------------------------------------------------- */ .sf-benefits-panel{ width: 100% !important; } .sf-benefit-list{ width: 100%; } /* ------------------------------------------------------- DOG TAG ------------------------------------------------------- */ .sf-dogtag-panel{ width: 100% !important; } .sf-dogtag-art{ width: auto !important; max-width: 100% !important; min-height: 300px !important; background-size: cover !important; background-position: center !important; } /* ------------------------------------------------------- OPERATION ------------------------------------------------------- */ .sf-operation-panel{ width: 100% !important; } .sf-operation-card{ width: auto !important; max-width: 100% !important; min-width: 0 !important; } } /* ========================================================= SMALL iPHONE ========================================================= */ @media(max-width:430px){ .sf-main{ width: calc(100% - 16px) !important; } .sf-panel-head{ padding: 10px 9px; } .sf-panel-head h2{ font-size: 13px; } .sf-panel-head small{ font-size: 6px; } .sf-benefit-list{ padding: 7px; } .sf-benefit-list article{ grid-template-columns: 34px minmax(0,1fr) 20px; gap: 7px; } } /* ========================================================= YUKINON SPECIAL FORCES V1.2.2 CLEAN HERO ASSET PASS ========================================================= */ .sf-hero{ min-height:500px; background:#070508; } .sf-hero-art{ inset:0 0 0 25% !important; background: linear-gradient( 90deg, rgba(8,5,9,.26), transparent 31% ), url("/assets/images/special-forces-hero-v12-clean.png") center right / cover no-repeat !important; background-position: 58% center !important; opacity:1 !important; filter: saturate(1.03) contrast(1.06) brightness(.86) !important; } .sf-hero::before{ background: linear-gradient( 90deg, rgba(5,4,7,1) 0%, rgba(6,4,7,.98) 26%, rgba(6,4,7,.78) 39%, rgba(6,4,7,.22) 57%, rgba(6,4,7,.07) 77%, rgba(6,4,7,.13) 100% ), linear-gradient( 180deg, rgba(0,0,0,.02), rgba(4,3,6,.08) 58%, rgba(5,3,7,.62) 100% ) !important; } /* Concept-style tactical side markings without baked-in UI */ .sf-hero-status{ backdrop-filter:blur(1px); } .sf-hero-copy{ max-width:760px; } /* --------------------------------------------------------- TABLET / MOBILE HERO --------------------------------------------------------- */ @media(max-width:1100px){ .sf-hero-art{ inset:0 !important; background-position: 60% center !important; } .sf-hero::before{ background: linear-gradient( 90deg, rgba(5,4,7,.91) 0%, rgba(5,4,7,.76) 35%, rgba(5,4,7,.18) 70%, rgba(5,4,7,.12) 100% ), linear-gradient( 180deg, rgba(0,0,0,.04), rgba(5,3,7,.24) 58%, rgba(5,3,7,.90) 100% ) !important; } } @media(max-width:760px){ .sf-hero-art{ background-position: 58% top !important; filter: saturate(1.02) contrast(1.05) brightness(.78) !important; } .sf-hero::before{ background: linear-gradient( 180deg, rgba(5,3,6,.08) 0%, rgba(5,3,6,.18) 30%, rgba(5,3,6,.67) 61%, rgba(5,3,6,.98) 100% ) !important; } .sf-hero-copy{ max-width:none; } } @media(max-width:430px){ .sf-hero-art{ background-position: 60% top !important; } } /* ========================================================= YUKINON SPECIAL FORCES V1.3.0 CONCEPT STRUCTURE REBUILD DESKTOP: HERO = FULL WIDTH ROW 1: RANK = 9 / 12 BENEFITS = 3 / 12 ROW 2: ROSTER = 5 / 12 BRIEFING = 4 / 12 DOG TAG = 3 / 12 ========================================================= */ @media(min-width:1181px){ /* ======================================================= MAIN COMMAND GRID ======================================================= */ .sf-main{ width: 100% !important; max-width: none !important; margin: 0 auto 80px !important; padding: 0 24px !important; display: grid !important; grid-template-columns: repeat( 12, minmax(0,1fr) ) !important; column-gap: 14px !important; row-gap: 14px !important; align-items: stretch; } /* * 既存HTMLのwrapperは * レイアウト上だけ消す。 * DOM自体は残るためJSには影響しない。 */ .sf-layout, .sf-left-column, .sf-right-column{ display: contents !important; } /* ======================================================= HEADER concept image closer ======================================================= */ .sf-site-header{ position: relative; width: 100% !important; max-width: none !important; min-height: 104px; padding: 0 52px; overflow: hidden; isolation: isolate; background: linear-gradient( 90deg, #050407 0%, #0a060b 39%, rgba(28,7,22,.96) 67%, rgba(12,4,11,.98) 100% ); } .sf-site-header::after{ content:""; position: absolute; z-index: -1; top: 0; right: 0; width: 56%; height: 100%; opacity: .21; background: linear-gradient( 90deg, rgba(7,4,8,1), rgba(7,4,8,.18) 48%, rgba(7,4,8,.50) ), url( "/assets/images/special-forces-hero-v12-clean.png" ) center 43% / cover no-repeat; filter: saturate(1.15) contrast(1.12); } .sf-site-header > *{ position: relative; z-index: 2; } /* ======================================================= FULL WIDTH HERO ======================================================= */ .sf-hero{ grid-column: 1 / -1 !important; grid-row: 1 !important; width: auto !important; height: clamp( 280px, 18vw, 330px ) !important; min-height: 0 !important; margin: 0 -24px !important; border-left: 0; border-right: 0; border-top: 0; } .sf-hero-art{ inset: 0 0 0 42% !important; background-position: 57% 43% !important; } .sf-hero::before{ background: linear-gradient( 90deg, rgba(4,3,5,1) 0%, rgba(5,3,6,.97) 25%, rgba(5,3,6,.72) 42%, rgba(5,3,6,.10) 63%, rgba(5,3,6,.08) 100% ), linear-gradient( 180deg, transparent 68%, rgba(5,3,6,.45) ) !important; } /* ======================================================= HERO INTERNAL STRUCTURE LEFT = SPECIAL FORCES CENTER = message RIGHT = character ======================================================= */ .sf-hero-copy{ position: relative; z-index: 4; width: 67%; max-width: none !important; height: 100%; padding: 28px 24px 24px 70px !important; display: grid; grid-template-columns: minmax(420px,1.45fr) minmax(250px,.72fr); grid-template-areas: "eyebrow lead" "title lead" "sign copy" "tags copy"; column-gap: 34px; align-content: center; } .sf-eyebrow{ grid-area: eyebrow; align-self: end; margin: 0 0 4px; } .sf-hero h1{ grid-area: title; margin: 0 !important; font-size: clamp( 3.8rem, 5.3vw, 5.8rem ) !important; line-height: .79 !important; } .sf-signature{ grid-area: sign; justify-self: center; margin: -2px 0 0 !important; font-size: clamp( 2rem, 3vw, 3.4rem ) !important; } .sf-hero-lead{ grid-area: lead; align-self: center; margin: 0 !important; max-width: 330px; font-size: clamp( 14px, 1.1vw, 18px ) !important; line-height: 1.75; } .sf-hero-copy-small{ grid-area: copy; align-self: start; max-width: 330px; margin: 4px 0 0 !important; line-height: 1.65; } .sf-hero-tags{ grid-area: tags; margin: 8px 0 0 !important; } /* ======================================================= ROW 1 RANK 9 / BENEFITS 3 ======================================================= */ .sf-ranks-panel{ grid-column: 1 / 10 !important; grid-row: 2 !important; height: 100%; margin: 0 !important; } .sf-benefits-panel{ grid-column: 10 / 13 !important; grid-row: 2 !important; height: 100%; margin: 0 !important; } /* Rank cards concept proportions */ .sf-rank-grid{ height: calc( 100% - 56px ); padding: 10px !important; gap: 10px !important; } .sf-rank-card{ min-height: 168px !important; padding: 20px 15px 15px 118px !important; } .sf-rank-medal{ left: 20px !important; top: 39px !important; width: 76px !important; height: 76px !important; } .sf-rank-card small{ font-size: 14px !important; } .sf-rank-card h3{ margin-top: 9px !important; font-size: 28px !important; } /* Benefits concept density */ .sf-benefit-list{ padding: 7px !important; gap: 4px !important; } .sf-benefit-list article{ min-height: 39px !important; padding: 5px 7px !important; grid-template-columns: 31px minmax(0,1fr) 18px !important; gap: 6px !important; } .sf-benefit-list article > b{ width: 28px !important; height: 28px !important; } .sf-benefit-list strong{ font-size: 8px !important; } .sf-benefit-list span{ font-size: 6px !important; } /* ======================================================= ROW 2 ROSTER 5 BRIEFING 4 DOGTAG 3 ======================================================= */ .sf-roster-panel{ grid-column: 1 / 6 !important; grid-row: 3 !important; height: 100%; margin: 0 !important; } .sf-operation-panel{ grid-column: 6 / 10 !important; grid-row: 3 !important; height: 100%; margin: 0 !important; } .sf-dogtag-panel{ grid-column: 10 / 13 !important; grid-row: 3 !important; height: 100%; min-height: 340px; margin: 0 !important; } /* ======================================================= ROSTER ======================================================= */ .sf-roster-head, .sf-roster-row{ grid-template-columns: 28px minmax(105px,1.2fr) minmax(90px,.9fr) minmax(72px,.65fr) minmax(75px,.72fr) 55px !important; gap: 5px !important; } .sf-roster-head{ padding: 0 9px !important; font-size: 6px; } .sf-roster-row{ min-height: 48px !important; padding: 5px 9px !important; } .sf-avatar{ width: 30px !important; height: 30px !important; flex-basis: 30px !important; } .sf-operator{ gap: 6px !important; } .sf-operator strong{ font-size: 8px !important; } /* ======================================================= BRIEFING ======================================================= */ .sf-operation-card{ min-height: 270px !important; height: calc( 100% - 80px ); margin: 10px !important; padding: 14px !important; grid-template-columns: minmax(0,1.2fr) minmax(150px,.8fr) !important; } .sf-operation-card h3{ font-size: clamp( 17px, 1.45vw, 24px ) !important; } /* ======================================================= DOG TAG ======================================================= */ .sf-dogtag-art{ width: auto !important; min-height: 0 !important; height: calc( 100% - 77px ) !important; margin: 9px !important; background-size: cover !important; background-position: center !important; } /* ======================================================= PANEL HEAD COMPACT ======================================================= */ .sf-panel-head{ min-height: 52px !important; padding: 8px 11px !important; } .sf-panel-head h2{ font-size: 14px !important; } .sf-panel-head small{ font-size: 6px !important; } } /* ========================================================= YUKINON SPECIAL FORCES V1.4.0 CONCEPT FIDELITY PASS ========================================================= */ /* ========================================================= ACTIVE NAV — concept trapezoid ========================================================= */ .sf-tabs .is-active{ min-width:215px; margin: 0 -5px; clip-path: polygon( 14px 0, 100% 0, calc(100% - 14px) 100%, 0 100% ); color:#fff; background: linear-gradient( 110deg, #e55ba5, #9c457f ); box-shadow: inset 0 -2px #ff86c2; } /* ========================================================= DESKTOP CONCEPT HERO ========================================================= */ @media(min-width:1181px){ .sf-hero{ position:relative; grid-column: 1 / -1 !important; display:grid !important; grid-template-columns: 110px minmax(430px,1.25fr) minmax(255px,.65fr) minmax(500px,1.25fr) !important; align-items: stretch; height: clamp( 275px, 18vw, 325px ) !important; min-height: 0 !important; overflow: hidden; background: #080508; } /* * 完成イメージと同じ * LEFT RAIL */ .sf-command-rail{ position:relative; z-index:5; padding: 27px 13px; display:flex; flex-direction:column; align-items:flex-start; border-right: 1px solid rgba(255,83,168,.14); background: linear-gradient( 90deg, rgba(255,65,156,.035), transparent ); color: #a78798; } .sf-command-crown{ margin-bottom: 18px; color: #ff80bd; font-size: 35px; line-height: 1; text-shadow: 0 0 17px rgba(255,78,168,.55); } .sf-command-rail span{ margin: 3px 0; font-size: 7px; font-weight: 900; letter-spacing: .11em; } .sf-command-cross{ margin-top: auto; color: #ff4da3; font-size: 25px; font-weight: 200; } /* ======================================================= LARGE TITLE ======================================================= */ .sf-hero-title-block{ position:relative; z-index:5; min-width:0; padding: 35px 16px 22px 31px; display:flex; flex-direction:column; justify-content:center; } .sf-eyebrow{ margin: 0 0 8px; color: #ff70b5; font-size: 10px; font-weight: 900; letter-spacing: .21em; } .sf-hero-title-block h1{ margin: 0; display:flex; align-items:center; gap: .16em; white-space: nowrap; color: #fff8fb; font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif; font-size: clamp( 3.5rem, 5vw, 5.5rem ); line-height: .83; letter-spacing: .015em; text-shadow: 0 5px 0 rgba(78,16,51,.40); } .sf-hero-title-block h1 span:last-child{ position:relative; } /* reference crosshair inside title */ .sf-hero-title-block h1 span:last-child::after{ content:""; position:absolute; left: 48%; top: 52%; width: 58px; height: 58px; transform: translate(-50%,-50%); border: 1px solid rgba(255,72,165,.52); border-radius: 50%; background: linear-gradient( transparent calc(50% - .5px), #ff4fa5 50%, transparent calc(50% + .5px) ), linear-gradient( 90deg, transparent calc(50% - .5px), #ff4fa5 50%, transparent calc(50% + .5px) ); opacity: .72; pointer-events:none; } .sf-signature{ align-self: flex-end; margin: 1px 20px 0 0; color: #ff67b4; font-family: "Segoe Script", "Brush Script MT", cursive; font-size: clamp( 2.2rem, 3.4vw, 3.8rem ); line-height: 1; transform: rotate(-5deg); text-shadow: 0 0 18px rgba(255,65,160,.30); } /* ======================================================= CENTER MESSAGE ======================================================= */ .sf-hero-message{ position:relative; z-index:5; min-width:0; padding: 39px 15px 25px; display:flex; flex-direction:column; justify-content:center; } .sf-hero-message::before{ content:"“"; position:absolute; left:-7px; top:37px; color: #ff62ad; font-family: Georgia, serif; font-size: 22px; } .sf-hero-message h2{ margin: 0 0 12px; color: #fff; font-family: Georgia, "Yu Mincho", serif; font-size: clamp( 13px, 1.25vw, 18px ); line-height: 1.45; } .sf-hero-message p{ margin: 0 0 18px; color: #d0bcc8; font-size: 9px; line-height: 1.8; } .sf-hero-message strong{ color: #ed7ab3; font-size: 8px; letter-spacing: .16em; } .sf-hero-message small{ max-width: 230px; margin-top: 8px; color: #806f7a; font-size: 6px; line-height: 1.5; letter-spacing: .1em; } /* ======================================================= CHARACTER ZONE ======================================================= */ .sf-hero-art{ position:relative !important; inset: auto !important; z-index: 1; width: 100%; height: 100%; background: linear-gradient( 90deg, rgba(8,5,9,.44), transparent 26% ), url( "/assets/images/special-forces-hero-v12-clean.png" ) 54% 43% / cover no-repeat !important; filter: saturate(1.08) contrast(1.06) brightness(.92) !important; } .sf-hero::before{ content:""; position:absolute; z-index:3; inset:0; pointer-events:none; background: linear-gradient( 90deg, rgba(6,4,7,.18), transparent 36%, transparent 79%, rgba(4,3,5,.14) ), linear-gradient( 180deg, transparent 78%, rgba(4,3,5,.34) ) !important; } /* old crosshair is no longer needed */ .sf-hero::after{ display:none !important; } /* ======================================================= RIGHT EDGE STATUS ======================================================= */ .sf-hero-status{ right: 28px !important; top: 35px !important; z-index: 7; grid-template-columns: auto 24px; max-width: 150px; line-height: 1.55; color: #d184a9; text-align:left; } .sf-hero-status span{ font-size: 7px; font-weight: 900; letter-spacing: .1em; } .sf-hero-status small{ margin-top: 4px; color: #936f81; font-size: 6px; letter-spacing: .08em; } /* ======================================================= REFERENCE-LIKE HEADER BANNER ======================================================= */ .sf-site-header::after{ opacity: .44 !important; background-position: 62% 43% !important; } /* ======================================================= RANK CARD — character watermark ======================================================= */ .sf-rank-card{ background: linear-gradient( 90deg, rgba(11,8,12,.98) 0%, rgba(11,8,12,.95) 56%, rgba(11,8,12,.60) 100% ), url( "/assets/images/special-forces-hero-v12-clean.png" ) 83% 38% / 66% auto no-repeat !important; } /* ======================================================= MORE AUTHENTIC MEDAL / WINGS ======================================================= */ .sf-rank-medal{ overflow: visible !important; clip-path: none !important; border: 0 !important; background: radial-gradient( circle, rgba(255,255,255,.94) 0%, currentColor 9%, rgba(255,255,255,.09) 23%, rgba(7,6,9,.92) 62% ) !important; border-radius: 50%; font-size: 28px !important; } .sf-rank-medal::before, .sf-rank-medal::after{ content:""; position:absolute; z-index:-1; top: 18%; width: 62%; height: 63%; opacity: .88; background: linear-gradient( 135deg, currentColor, rgba(255,255,255,.18) ); clip-path: polygon( 100% 50%, 72% 17%, 0 0, 40% 38%, 0 30%, 46% 57%, 4% 68%, 63% 72%, 30% 100%, 82% 80% ); filter: drop-shadow( 0 0 8px currentColor ); } .sf-rank-medal::before{ right: 73%; } .sf-rank-medal::after{ left: 73%; transform: scaleX(-1); } /* ======================================================= BENEFITS — reference character watermark ======================================================= */ .sf-benefits-panel{ background: linear-gradient( 90deg, rgba(16,9,15,.98), rgba(16,9,15,.82) ), url( "/assets/images/special-forces-hero-v12-clean.png" ) 75% center / cover no-repeat !important; } } /* ========================================================= TABLET / iPHONE New hero HTML compatibility ========================================================= */ @media(max-width:1180px){ .sf-command-rail{ display:none; } .sf-hero{ position:relative; display:block !important; min-height: 580px !important; } .sf-hero-art{ position:absolute !important; inset: 0 !important; z-index: 1; width: 100%; height: 100%; background: url( "/assets/images/special-forces-hero-v12-clean.png" ) 60% top / cover no-repeat !important; } .sf-hero::before{ z-index: 2 !important; background: linear-gradient( 180deg, rgba(5,3,6,.06), rgba(5,3,6,.20) 34%, rgba(5,3,6,.78) 67%, rgba(5,3,6,.98) ) !important; } .sf-hero-title-block{ position:absolute; z-index: 5; left: 20px; right: 20px; bottom: 178px; } .sf-hero-title-block h1{ margin: 5px 0 0; color: white; font-family: Impact, sans-serif; font-size: clamp( 3.2rem, 14vw, 5.2rem ); line-height: .78; } .sf-hero-title-block h1 span{ display:block; } .sf-signature{ margin: 6px 0 0 22%; color: #ff62ae; font-family: "Segoe Script", cursive; font-size: 2.5rem; } .sf-hero-message{ position:absolute; z-index: 5; left: 20px; right: 20px; bottom: 22px; } .sf-hero-message h2{ margin: 0 0 6px; font-size: 16px; } .sf-hero-message p{ margin: 0; color: #cfbdc8; font-size: 10px; line-height: 1.6; } .sf-hero-message strong, .sf-hero-message small{ display:none; } } /* ========================================================= MOBILE ========================================================= */ @media(max-width:760px){ .sf-hero{ min-height: 610px !important; } .sf-hero-title-block{ bottom: 180px; } .sf-eyebrow{ font-size: 8px; } .sf-hero-status{ top: 14px !important; right: 12px !important; } } /* ========================================================= YUKINON SPECIAL FORCES V1.5.0 COMMAND DETAIL PASS ========================================================= */ /* ========================================================= REAL ELITE EMBLEMS ========================================================= */ .sf-rank-emblem{ position:absolute; left:22px; top:34px; width:104px; height:112px; display:grid; place-items:center; isolation:isolate; filter: drop-shadow( 0 7px 8px rgba(0,0,0,.65) ); } .sf-emblem-core{ position:relative; z-index:4; width:66px; height:78px; display:grid; place-items:center; clip-path: polygon( 50% 0, 89% 18%, 100% 58%, 50% 100%, 0 58%, 11% 18% ); border: 1px solid currentColor; background: linear-gradient( 145deg, rgba(255,255,255,.55), rgba(255,255,255,.08) 27%, rgba(0,0,0,.45) 70% ); } .sf-emblem-core::before{ content:""; position:absolute; inset:7px; clip-path: inherit; background: linear-gradient( 145deg, rgba(255,255,255,.28), rgba(0,0,0,.32) ); } .sf-emblem-gem{ position:relative; z-index:3; width:35px; height:35px; display:grid; place-items:center; transform: rotate(45deg); border: 2px solid rgba(255,255,255,.72); background: linear-gradient( 135deg, #ff63b4, #c247a8 48%, #ff9bd3 ); box-shadow: inset 0 0 12px rgba(255,255,255,.47), 0 0 17px rgba(255,72,173,.62); font-style:normal; font-size:19px; } .sf-emblem-gem::before{ content:""; position:absolute; inset:5px; border: 1px solid rgba(255,255,255,.42); } .sf-rank-emblem-300k .sf-emblem-gem{ transform: rotate(45deg); } .sf-rank-emblem-300k .sf-emblem-gem{ color:white; } .sf-rank-emblem-300k .sf-emblem-gem::after{ content:"♥"; position:absolute; inset:0; display:grid; place-items:center; transform: rotate(-45deg); color:white; font-size:20px; } /* --------------------------------------------------------- WINGS --------------------------------------------------------- */ .sf-wing{ position:absolute; z-index:1; top:43px; width:55px; height:54px; color:inherit; background: linear-gradient( 150deg, rgba(255,255,255,.85), currentColor 36%, rgba(0,0,0,.40) ); clip-path: polygon( 100% 43%, 71% 8%, 4% 0, 43% 33%, 0 27%, 46% 51%, 4% 61%, 56% 67%, 28% 100%, 82% 76% ); opacity:.94; } .sf-wing-left{ right:69%; } .sf-wing-right{ left:69%; transform: scaleX(-1); } /* --------------------------------------------------------- CROWN --------------------------------------------------------- */ .sf-emblem-crown{ position:absolute; z-index:7; top:-8px; color:currentColor; font-size:32px; line-height:1; text-shadow: 0 0 12px currentColor; } /* SILVER */ .sf-rank-emblem-100k{ color: #e2e7ef; } .sf-rank-emblem-100k .sf-emblem-core{ background: linear-gradient( 145deg, #ffffff, #89909b 32%, #3f444d 68%, #e4e9ef ); } /* GOLD */ .sf-rank-emblem-200k{ color: #eabf56; } .sf-rank-emblem-200k .sf-emblem-core{ background: linear-gradient( 145deg, #fff0a5, #bb7925 36%, #5a3408 70%, #e8bd54 ); } /* PLATINUM */ .sf-rank-emblem-300k{ color: #ff65b7; } .sf-rank-emblem-300k .sf-emblem-core{ background: linear-gradient( 145deg, #ffd0ec, #c2449a 34%, #5f275e 67%, #ff6ebc ); } .sf-rank-emblem-300k{ filter: drop-shadow( 0 0 15px rgba(255,74,174,.65) ) drop-shadow( 0 7px 8px rgba(0,0,0,.65) ); } /* ========================================================= RANK CARD TYPOGRAPHY ========================================================= */ .sf-rank-copy{ position:relative; z-index:3; } .sf-rank-jp{ display:block; margin-top:2px; color:#a8919f; font-size:7px; letter-spacing:.08em; } .sf-rank-foot{ position:absolute; left:18px; bottom:8px; color:#94838e; font-size:6px; font-weight:900; letter-spacing:.15em; } .rank-200k .sf-rank-foot{ color: #bc984d; } .rank-300k .sf-rank-foot{ color: #dc4d9a; } /* ========================================================= OPERATION BRIEFING 2.0 ========================================================= */ .sf-operation-card{ position:relative; min-height:286px; padding:10px !important; display:grid !important; grid-template-columns: minmax(0,1.02fr) minmax(0,1fr) !important; gap:10px !important; overflow:hidden; } /* --------------------------------------------------------- TACTICAL MAP --------------------------------------------------------- */ .sf-operation-map{ position:relative; min-height:260px; overflow:hidden; border: 1px solid rgba(238,71,158,.31); background: radial-gradient( circle at 72% 58%, rgba(255,75,170,.17), transparent 18% ), radial-gradient( circle at 30% 30%, rgba(151,64,154,.14), transparent 23% ), linear-gradient( 135deg, #100b12, #09080b ); } .sf-operation-map::before{ content:""; position:absolute; inset:0; opacity:.25; background: linear-gradient( 28deg, transparent 46%, rgba(225,82,160,.22) 47%, rgba(225,82,160,.22) 48%, transparent 49% ), linear-gradient( -31deg, transparent 58%, rgba(225,82,160,.20) 59%, rgba(225,82,160,.20) 60%, transparent 61% ); } .sf-map-grid{ position:absolute; inset:0; opacity:.16; background-image: linear-gradient( rgba(255,255,255,.11) 1px, transparent 1px ), linear-gradient( 90deg, rgba(255,255,255,.10) 1px, transparent 1px ); background-size: 28px 28px; } .sf-map-point{ position:absolute; z-index:3; color:#ff6db6; font-size:15px; text-shadow: 0 0 11px #ff4fa5; } .sf-map-point.point-a{ left:24%; top:28%; } .sf-map-point.point-b{ left:62%; top:66%; } .sf-map-point.point-c{ right:15%; top:25%; } .sf-map-crosshair{ position:absolute; z-index:3; left:67%; top:37%; width:62px; height:62px; border: 1px solid rgba(255,73,164,.82); border-radius:50%; box-shadow: 0 0 16px rgba(255,66,158,.22); } .sf-map-crosshair::before, .sf-map-crosshair::after{ content:""; position:absolute; background: #ff4fa5; } .sf-map-crosshair::before{ left:50%; top:-17px; width:1px; height:96px; } .sf-map-crosshair::after{ left:-17px; top:50%; width:96px; height:1px; } .sf-map-crosshair i{ position:absolute; inset:12px; border: 1px dashed rgba(255,99,181,.54); border-radius:50%; } .sf-map-cat{ position:absolute; z-index:3; right:10%; bottom:15%; color:#f370b4; font-size:25px; transform: rotate(-8deg); } .sf-map-code{ position:absolute; left:11px; bottom:9px; color:#815d70; font-size:6px; letter-spacing:.16em; } /* --------------------------------------------------------- OPERATION INFO --------------------------------------------------------- */ .sf-operation-info{ min-width:0; padding: 5px 7px; display:flex; flex-direction:column; } .sf-operation-label{ display:flex; align-items:center; justify-content:space-between; gap:8px; } .sf-operation-label small{ color:#ef61aa; letter-spacing:.13em; } .sf-operation-label span{ color:#9c778a; font-size:6px; letter-spacing:.12em; } .sf-operation-info h3{ margin: 9px 0 1px; font-family: Georgia, serif; font-size: clamp( 17px, 1.35vw, 23px ); line-height:1.05; } .sf-operation-jp{ margin: 3px 0 12px; color:#a78c9b; font-size:7px; } /* --------------------------------------------------------- COMMAND STATUS --------------------------------------------------------- */ .sf-command-link{ display:grid; grid-template-columns: auto minmax(70px,1fr) auto; gap:8px; align-items:end; padding: 9px 0; border-top: 1px solid rgba(255,255,255,.07); border-bottom: 1px solid rgba(255,255,255,.07); } .sf-command-link small{ display:block; color:#85717d; font-size:6px; } .sf-command-link strong{ color:#f27bb5; font-size:9px; } .sf-command-progress{ height:6px; overflow:hidden; border: 1px solid rgba(255,92,177,.27); background:#080609; } .sf-command-progress i{ display:block; width:100%; height:100%; background: linear-gradient( 90deg, #e94b9b, #ff91c8 ); box-shadow: 0 0 11px #ee559e; } .sf-command-link > span{ color:#ff75b7; font-size:7px; font-weight:900; } /* --------------------------------------------------------- LOWER INFO --------------------------------------------------------- */ .sf-operation-bottom{ margin-top:9px; display:grid; grid-template-columns: 1fr .8fr; gap:7px; flex:1; } .sf-mission-objective, .sf-special-reward{ min-width:0; padding:9px; border: 1px solid rgba(255,255,255,.07); background: rgba(255,255,255,.012); } .sf-operation-bottom small{ color:#ed66a8; font-size:6px; letter-spacing:.12em; } .sf-mission-objective p{ margin: 5px 0 6px; color:#a993a0; font-size:7px; line-height:1.5; } .sf-mission-objective ul{ margin:0; padding:0; list-style:none; } .sf-mission-objective li{ margin:2px 0; color:#c9b5c1; font-size:6px; } .sf-mission-objective li::before{ content:"◎"; margin-right:5px; color:#ff65ae; } .sf-special-reward strong{ display:block; margin-top:4px; color:#bda6b3; font-size:7px; } .sf-reward-thumb{ height:54px; margin-top:7px; border: 1px solid rgba(255,81,168,.26); background: linear-gradient( rgba(15,8,14,.22), rgba(15,8,14,.35) ), url( "/assets/images/special-forces-hero-v12-clean.png" ) center 42% / cover no-repeat; } /* ========================================================= MOBILE ========================================================= */ @media(max-width:760px){ .sf-rank-emblem{ left:14px; top:35px; width:85px; height:90px; } .sf-emblem-core{ width:53px; height:63px; } .sf-wing{ width:43px; height:43px; } .sf-rank-card{ padding-left: 110px !important; } .sf-operation-card{ grid-template-columns: 1fr !important; } .sf-operation-map{ min-height: 210px; } .sf-operation-bottom{ grid-template-columns: 1fr; } } @media(max-width:420px){ .sf-rank-card{ padding: 120px 13px 18px !important; } .sf-rank-emblem{ left:50%; top:20px; transform: translateX(-50%); } } /* ========================================================= YUKINON SPECIAL FORCES V1.6.0 HERO INTEGRATION PASS ========================================================= */ @media(min-width:1181px){ /* ------------------------------------------------------- HERO全体を1枚の作戦ビジュアルとして統合 ------------------------------------------------------- */ .sf-hero{ position:relative; isolation:isolate; background: #080508 !important; } /* * clean heroをHERO全面へ展開。 * 右側だけではなく左にも作戦室の雰囲気を残す。 */ .sf-hero-art{ position:absolute !important; inset:0 !important; z-index:0 !important; width:100% !important; height:100% !important; background: url( "/assets/images/special-forces-hero-v12-clean.png" ) 63% 43% / cover no-repeat !important; opacity:.97; filter: saturate(1.08) contrast(1.09) brightness(.84) !important; } /* * 左側を真っ黒にせず、 * 背景が透ける作戦HUD風グラデーションへ。 */ .sf-hero::before{ content:""; position:absolute; inset:0; z-index:1 !important; pointer-events:none; background: linear-gradient( 90deg, rgba(5,3,6,.97) 0%, rgba(5,3,6,.91) 13%, rgba(5,3,6,.78) 28%, rgba(5,3,6,.48) 42%, rgba(5,3,6,.13) 61%, rgba(5,3,6,.03) 78%, rgba(5,3,6,.16) 100% ), linear-gradient( 180deg, rgba(0,0,0,.08), transparent 62%, rgba(5,3,6,.40) ) !important; } /* ------------------------------------------------------- 背景の桜・作戦空間を感じさせる左側HUD ------------------------------------------------------- */ .sf-command-rail{ z-index:4; background: linear-gradient( 90deg, rgba(10,5,10,.72), rgba(10,5,10,.31) ) !important; backdrop-filter: blur(1px); border-right: 1px solid rgba(255,76,164,.24); } .sf-command-rail::after{ content:""; position:absolute; left:14px; right:14px; bottom:30%; height:1px; background: linear-gradient( 90deg, #ff4fa5, transparent ); box-shadow: 0 0 11px rgba(255,75,163,.55); } /* ------------------------------------------------------- SPECIAL FORCES TITLE ------------------------------------------------------- */ .sf-hero-title-block{ z-index:4; background: linear-gradient( 90deg, rgba(5,3,6,.36), transparent ); } .sf-hero-title-block h1{ font-size: clamp( 3.75rem, 5.1vw, 5.65rem ); letter-spacing: -.005em; text-shadow: 0 4px 0 rgba(75,14,48,.55), 0 0 18px rgba(255,77,166,.10); } /* * 完成イメージの少し荒い軍用ステンシル感 */ .sf-hero-title-block h1{ filter: contrast(1.08); } /* ------------------------------------------------------- MESSAGE ------------------------------------------------------- */ .sf-hero-message{ z-index:4; padding-left: 25px; background: linear-gradient( 90deg, rgba(5,3,6,.23), transparent ); } .sf-hero-message h2{ text-shadow: 0 2px 5px rgba(0,0,0,.9); } .sf-hero-message p{ color: #dfcbd6; text-shadow: 0 1px 4px rgba(0,0,0,.85); } /* ------------------------------------------------------- Character position ------------------------------------------------------- */ .sf-hero-status{ z-index:5; } /* * 背景画像は全面にあるので、 * 以前の独立した4列目art領域は透明なプレースホルダに。 */ .sf-hero-art{ pointer-events:none; } /* ======================================================= RANK CARD — closer to concept ======================================================= */ .sf-rank-card{ overflow:hidden; border: 1px solid rgba(255,255,255,.18) !important; background: linear-gradient( 90deg, rgba(7,6,9,.97) 0%, rgba(11,8,12,.94) 54%, rgba(11,8,12,.56) 100% ), url( "/assets/images/special-forces-hero-v12-clean.png" ) 82% 35% / 72% auto no-repeat !important; } .sf-rank-card::before{ opacity:.34; } /* * 内側の軍用フレーム */ .sf-rank-card .sf-rank-copy::after{ content:""; position:absolute; z-index:-1; left:-9px; right:-8px; top:-13px; bottom:-6px; pointer-events:none; border-top: 1px solid rgba(255,255,255,.08); border-bottom: 1px solid currentColor; opacity:.31; } .rank-100k{ box-shadow: inset 0 0 28px rgba(225,232,243,.025); } .rank-200k{ box-shadow: inset 0 0 32px rgba(231,181,61,.035); } .rank-300k{ box-shadow: inset 0 0 38px rgba(241,62,159,.065), 0 0 17px rgba(238,54,157,.07); } /* * 右上番号を完成イメージの位置へ */ .sf-rank-index{ right:11px; top:8px; font-size:10px; letter-spacing:.05em; } /* * 左下RANK表記 */ .sf-rank-foot{ bottom:7px; padding-right:7px; border-right: 14px solid currentColor; } /* ======================================================= PANEL DENSITY ======================================================= */ .sf-panel{ background: linear-gradient( 155deg, rgba(16,10,17,.97), rgba(5,4,7,.99) ); } .sf-panel-head{ border-bottom: 1px solid rgba(255,78,166,.19); background: linear-gradient( 90deg, rgba(235,62,153,.055), transparent 68% ); } /* reference corner brackets */ .sf-panel::before{ width:19px; height:19px; left:5px; top:5px; } .sf-panel::after{ width:19px; height:19px; right:5px; bottom:5px; } } /* ========================================================= iPHONE / TABLET 背景全面化 ========================================================= */ @media(max-width:1180px){ .sf-hero-art{ background: url( "/assets/images/special-forces-hero-v12-clean.png" ) 60% top / cover no-repeat !important; } .sf-hero::before{ background: linear-gradient( 180deg, rgba(5,3,6,.07), rgba(5,3,6,.20) 33%, rgba(5,3,6,.61) 57%, rgba(5,3,6,.96) 100% ) !important; } } /* ========================================================= YUKINON SPECIAL FORCES V1.7.0 FIDELITY DETAIL PASS ========================================================= */ /* ========================================================= RANK CARDS — MILITARY FRAME ========================================================= */ @media(min-width:1181px){ .sf-rank-card{ position:relative; clip-path: polygon( 12px 0, calc(100% - 50px) 0, calc(100% - 42px) 7px, 100% 7px, 100% calc(100% - 12px), calc(100% - 12px) 100%, 48px 100%, 40px calc(100% - 7px), 0 calc(100% - 7px), 0 12px ); border: 0 !important; isolation:isolate; } /* * main metal frame */ .sf-rank-card::before{ content:""; position:absolute; z-index:7; inset:5px; pointer-events:none; clip-path: polygon( 10px 0, calc(100% - 43px) 0, calc(100% - 36px) 6px, 100% 6px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 42px 100%, 35px calc(100% - 6px), 0 calc(100% - 6px), 0 10px ); border: 1px solid currentColor; opacity:.48; background: linear-gradient( 135deg, rgba(255,255,255,.10), transparent 14%, transparent 84%, rgba(255,255,255,.06) ); } /* * top tactical rail */ .sf-rank-card::after{ content:""; position:absolute; z-index:8; left:16%; top:0; width:37%; height:4px; background: linear-gradient( 90deg, transparent, currentColor 13%, currentColor 83%, transparent ); box-shadow: 0 0 10px currentColor; opacity:.78; } /* SILVER FRAME */ .rank-100k{ color: #e3e8ef; box-shadow: inset 0 0 0 1px rgba(230,237,246,.20), inset 0 0 30px rgba(214,224,238,.035), 0 0 12px rgba(210,220,235,.04); } /* GOLD FRAME */ .rank-200k{ color: #e4b74f; box-shadow: inset 0 0 0 1px rgba(234,187,79,.25), inset 0 0 32px rgba(224,168,52,.055), 0 0 14px rgba(215,161,47,.06); } /* PLATINUM FRAME */ .rank-300k{ color: #ff59ab; box-shadow: inset 0 0 0 1px rgba(255,87,178,.30), inset 0 0 39px rgba(240,56,157,.09), 0 0 18px rgba(240,56,157,.10); } /* * rank character watermark */ .sf-rank-card{ background-position: 93% 33% !important; background-size: 58% auto !important; } .sf-rank-copy{ position:relative; z-index:5; } /* * decorative underline below coin amount */ .sf-rank-copy h3{ position:relative; display: inline-block; } .sf-rank-copy h3::after{ content:""; position:absolute; left:0; bottom:-7px; width:52px; height:1px; background: currentColor; opacity:.52; } /* * bottom technical rail */ .sf-rank-foot{ z-index:9; left:17px; bottom:6px; padding: 0 17px 0 0; border-right: 18px solid currentColor; font-size:6px; letter-spacing:.16em; } /* ======================================================= OPERATOR BENEFITS — CONCEPT WATERMARK ======================================================= */ .sf-benefits-panel{ position:relative; background: linear-gradient( 90deg, rgba(15,8,14,.98) 0%, rgba(15,8,14,.93) 46%, rgba(15,8,14,.62) 70%, rgba(15,8,14,.43) 100% ), url( "/assets/images/special-forces-hero-v12-clean.png" ) 82% 39% / 165% auto no-repeat !important; } .sf-benefit-list{ position:relative; z-index:4; background: linear-gradient( 90deg, rgba(6,4,7,.14), transparent ); } .sf-benefit-list article{ background: linear-gradient( 90deg, rgba(239,58,153,.12), rgba(16,8,14,.68) 65%, rgba(16,8,14,.46) ) !important; border-color: rgba(255,89,176,.16) !important; backdrop-filter: blur(1px); } .sf-benefit-list article:hover{ border-color: rgba(255,89,176,.38) !important; background: linear-gradient( 90deg, rgba(239,58,153,.19), rgba(16,8,14,.72) ) !important; } } /* ========================================================= OPERATION BRIEFING — TARGET STRUCTURE ========================================================= */ .sf-operation-card{ position:relative; display:block !important; min-height: 300px !important; padding: 9px !important; overflow:hidden; background: linear-gradient( 145deg, rgba(10,7,11,.96), rgba(5,4,7,.99) ) !important; } .sf-operation-top{ display:grid; grid-template-columns: minmax(230px,.83fr) minmax(280px,1.17fr); gap:9px; } /* --------------------------------------------------------- LEFT OPERATION PANEL --------------------------------------------------------- */ .sf-operation-info{ position:relative; min-width:0; padding: 13px 13px 10px; border: 1px solid rgba(255,255,255,.07); background: linear-gradient( 150deg, rgba(255,255,255,.018), rgba(0,0,0,.10) ); } .sf-operation-info::after{ content:"+"; position:absolute; right:11px; top:36%; color:#ff4fa5; font-size:26px; font-weight:200; text-shadow: 0 0 11px rgba(255,70,165,.60); } .sf-operation-label{ display:flex; justify-content:space-between; align-items:center; gap:8px; } .sf-operation-label small{ color:#ef5ca9; font-size:6px; font-weight:900; letter-spacing:.14em; } .sf-operation-label span{ color:#8e7181; font-size:6px; letter-spacing:.09em; } .sf-operation-info h3{ margin: 8px 0 2px; max-width:300px; font-family: Georgia, serif; font-size: clamp( 18px, 1.5vw, 26px ); line-height:1.02; letter-spacing:.02em; } .sf-operation-jp{ margin: 5px 0 12px; color:#ad8e9e; font-size:7px; } /* --------------------------------------------------------- MISSION PROGRESS --------------------------------------------------------- */ .sf-mission-progress{ margin-top: 18px; display:grid; grid-template-columns: minmax(0,1fr) 78px; gap:8px; } .sf-progress-main, .sf-progress-days{ border: 1px solid rgba(255,255,255,.075); background: rgba(0,0,0,.16); } .sf-progress-main{ padding: 8px 9px; } .sf-progress-main small, .sf-progress-days small{ display:block; color:#a07d8f; font-size:6px; letter-spacing:.10em; } .sf-progress-row{ margin-top:7px; display:grid; grid-template-columns: minmax(50px,1fr) 31px; gap:8px; align-items:center; } .sf-progress-line{ position:relative; height:7px; overflow:hidden; border: 1px solid rgba(255,89,177,.27); background:#070508; } .sf-progress-line::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:0%; background: linear-gradient( 90deg, #e94398, #ff8cc7 ); box-shadow: 0 0 12px #ed4fa1; } .sf-progress-row strong{ color:#ff77b9; font-family:Georgia,serif; font-size:13px; text-align:right; } .sf-progress-days{ padding: 7px; text-align:center; } .sf-progress-days strong{ display:block; margin-top:2px; color:#fff; font-family:Georgia,serif; font-size:27px; line-height:1; } .sf-progress-days span{ display:block; margin-top:3px; color:#9b788a; font-size:6px; letter-spacing:.09em; } /* --------------------------------------------------------- RIGHT TACTICAL MAP --------------------------------------------------------- */ .sf-operation-map{ position:relative; min-height: 169px !important; overflow:hidden; border: 1px solid rgba(255,80,169,.27); background: radial-gradient( circle at 68% 47%, rgba(255,62,158,.17), transparent 15% ), radial-gradient( circle at 34% 30%, rgba(159,49,139,.11), transparent 20% ), linear-gradient( 145deg, #110b13, #060608 ); } .sf-operation-map::after{ content:""; position:absolute; inset:0; pointer-events:none; background: linear-gradient( 90deg, rgba(255,59,157,.04), transparent 30% ); box-shadow: inset 0 0 35px rgba(0,0,0,.50); } /* fake route lines */ .sf-map-route{ position:absolute; z-index:2; height:1px; transform-origin:left center; background: linear-gradient( 90deg, rgba(255,86,174,.15), rgba(255,86,174,.72), rgba(255,86,174,.11) ); box-shadow: 0 0 6px rgba(255,61,159,.30); } .sf-map-route.route-a{ left:25%; top:39%; width:43%; transform: rotate(19deg); } .sf-map-route.route-b{ left:45%; top:68%; width:33%; transform: rotate(-29deg); } /* ========================================================= LOWER MISSION PANELS ========================================================= */ .sf-operation-bottom{ margin-top:9px; display:grid; grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr); gap:8px; } .sf-mission-objective, .sf-special-reward{ min-height:82px; padding: 9px 10px; border: 1px solid rgba(255,255,255,.07); background: linear-gradient( 145deg, rgba(255,255,255,.018), rgba(0,0,0,.12) ); } .sf-operation-bottom small{ color:#e95da5; font-size:6px; letter-spacing:.12em; } .sf-mission-objective p{ margin: 5px 0 5px; color:#ac939f; font-size:7px; line-height:1.45; } .sf-mission-objective ul{ margin:0; padding:0; display:flex; gap:11px; flex-wrap:wrap; list-style:none; } .sf-mission-objective li{ color:#c6aeba; font-size:6px; } .sf-mission-objective li::before{ content:"◎"; margin-right:4px; color:#ff61ad; } .sf-reward-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:8px; } .sf-reward-head strong{ display:block; margin-top:3px; color:#bca3b0; font-size:7px; } .sf-reward-head > span{ color:#ff5daa; font-size:11px; } .sf-reward-thumb{ height:47px; margin-top:7px; border: 1px solid rgba(255,76,166,.31); background: linear-gradient( rgba(7,4,7,.17), rgba(7,4,7,.28) ), url( "/assets/images/special-forces-hero-v12-clean.png" ) 58% 43% / cover no-repeat; } /* ========================================================= MOBILE ========================================================= */ @media(max-width:760px){ .sf-operation-top{ grid-template-columns: 1fr; } .sf-operation-map{ min-height: 220px !important; } .sf-operation-bottom{ grid-template-columns: 1fr; } .sf-mission-progress{ grid-template-columns: minmax(0,1fr) 72px; } } /* ========================================================= YUKINON SPECIAL FORCES V1.8.0 EXACT CONCEPT FIDELITY PASS Desktop only: - hero uses approved concept crop directly - three fixed rank cards use approved concept crops - OPERATOR BENEFITS uses approved concept crop Mobile/tablet keep semantic responsive HTML layout ========================================================= */ @media(min-width:1181px){ /* ======================================================= HERO — exact approved concept visual ======================================================= */ .sf-hero{ position:relative !important; grid-column: 1 / -1 !important; display:block !important; width:auto !important; height:auto !important; min-height:0 !important; aspect-ratio: 1672 / 266 !important; margin: 0 -24px !important; overflow:hidden !important; border: 0 !important; border-bottom: 1px solid rgba(255,74,164,.42) !important; background: url( "/assets/images/special-forces-concept-hero-v180.png" ) center / 100% 100% no-repeat !important; box-shadow: none !important; } /* The approved concept crop already contains these visuals. */ .sf-hero::before, .sf-hero::after, .sf-command-rail, .sf-hero-title-block, .sf-hero-message, .sf-hero-art, .sf-hero-status{ display:none !important; } /* ======================================================= RANK CARDS — exact approved concept artwork ======================================================= */ .sf-rank-grid{ display:grid !important; grid-template-columns: repeat(3,minmax(0,1fr)) !important; gap: 10px !important; padding: 10px !important; height: calc(100% - 52px) !important; } .sf-rank-card{ position:relative !important; min-height:0 !important; height:auto !important; aspect-ratio: 2.45 / 1 !important; padding:0 !important; overflow:hidden !important; clip-path:none !important; border: 0 !important; color:inherit; background-color: #09070a !important; background-repeat: no-repeat !important; background-position: center !important; background-size: 100% 100% !important; box-shadow: none !important; } .sf-rank-card.rank-100k{ background-image: url( "/assets/images/special-forces-rank-silver-v180.png" ) !important; } .sf-rank-card.rank-200k{ background-image: url( "/assets/images/special-forces-rank-gold-v180.png" ) !important; } .sf-rank-card.rank-300k{ background-image: url( "/assets/images/special-forces-rank-platinum-v180.png" ) !important; } /* * Exact artwork already contains all desktop rank labels, * numbers, emblem, border and watermark. */ .sf-rank-card::before, .sf-rank-card::after, .sf-rank-card > *{ display:none !important; } /* ======================================================= OPERATOR BENEFITS — exact approved concept artwork ======================================================= */ .sf-benefits-panel{ position:relative !important; min-height:0 !important; overflow:hidden !important; background: url( "/assets/images/special-forces-benefits-v180.png" ) center / 100% 100% no-repeat !important; border: 0 !important; box-shadow: none !important; } .sf-benefits-panel::before, .sf-benefits-panel::after, .sf-benefits-panel > *{ display:none !important; } /* ======================================================= ROW PROPORTIONS — match concept more closely ======================================================= */ .sf-ranks-panel{ grid-column: 1 / 10 !important; grid-row: 2 !important; min-height: 221px !important; margin: 0 !important; } .sf-benefits-panel{ grid-column: 10 / 13 !important; grid-row: 2 !important; min-height: 221px !important; margin: 0 !important; } .sf-roster-panel{ grid-column: 1 / 6 !important; } .sf-operation-panel{ grid-column: 6 / 10 !important; } .sf-dogtag-panel{ grid-column: 10 / 13 !important; } /* ======================================================= GLOBAL DENSITY ======================================================= */ .sf-main{ row-gap: 10px !important; column-gap: 10px !important; } .sf-panel{ margin-top: 0 !important; } } /* ========================================================= YUKINON SPECIAL FORCES V1.8.1 OPERATION BRIEFING EXACT FIDELITY FIX ========================================================= */ @media(min-width:1181px){ /* ======================================================= WHOLE OPERATION PANEL ======================================================= */ .sf-operation-card{ position:relative !important; display:block !important; min-height:0 !important; height:auto !important; padding: 8px !important; background: #080609 !important; } /* ======================================================= TOP = ONE TACTICAL DISPLAY completed concept is NOT two cards ======================================================= */ .sf-operation-top{ position:relative; display:block !important; min-height: 170px; overflow: hidden; border: 1px solid rgba(255,83,171,.25); background: linear-gradient( 90deg, rgba(10,7,11,.99) 0%, rgba(10,7,11,.95) 31%, rgba(10,7,11,.70) 48%, rgba(10,7,11,.12) 72%, rgba(10,7,11,.08) 100% ); } /* ======================================================= MAP map is the background of the right side ======================================================= */ .sf-operation-map{ position:absolute !important; z-index:1; top:0; right:0; bottom:0; left: 40%; width:auto !important; min-height: 0 !important; height: auto !important; border: 0 !important; background: radial-gradient( circle at 66% 44%, rgba(255,63,160,.20), transparent 16% ), radial-gradient( circle at 31% 35%, rgba(157,54,143,.12), transparent 24% ), linear-gradient( 145deg, #120b13, #080609 ) !important; box-shadow: inset 35px 0 42px rgba(8,6,9,.95); } /* * fade map into operation text, * matching the concept image */ .sf-operation-map::before{ content:""; position:absolute; z-index:4; inset:0; pointer-events:none; background: linear-gradient( 90deg, rgba(8,6,9,.98) 0%, rgba(8,6,9,.68) 12%, rgba(8,6,9,.13) 38%, transparent 66% ); } .sf-operation-map::after{ content:""; position:absolute; z-index:5; inset:0; pointer-events:none; box-shadow: inset 0 0 32px rgba(0,0,0,.42); background: linear-gradient( 180deg, rgba(0,0,0,.02), transparent 75%, rgba(7,5,8,.27) ); } /* ======================================================= OPERATION INFO overlay on one display, not a separate card ======================================================= */ .sf-operation-info{ position:relative; z-index:6; width: 61%; min-height: 170px; padding: 12px 14px 10px 14px !important; display:flex; flex-direction:column; border: 0 !important; background: transparent !important; } .sf-operation-info::after{ display:none !important; } /* operation label */ .sf-operation-label{ width: 100%; justify-content: flex-start !important; gap: 12px !important; } .sf-operation-label small{ color: #ef5da9; font-size: 6px; font-weight: 900; letter-spacing: .15em; } .sf-operation-label span{ color: #aa8197; font-size: 6px; letter-spacing: .08em; } /* ======================================================= TITLE one line like the approved concept ======================================================= */ .sf-operation-info h3{ max-width: none !important; margin: 7px 0 1px !important; color: #fff; white-space: nowrap; font-family: Georgia, "Times New Roman", serif; font-size: clamp( 15px, 1.12vw, 20px ) !important; line-height: 1 !important; letter-spacing: .015em; } .sf-operation-jp{ margin: 4px 0 12px !important; color: #b28ea0; font-size: 6px !important; } /* ======================================================= MISSION PROGRESS horizontal like concept ======================================================= */ .sf-mission-progress{ width: 100%; margin-top: auto !important; display:grid !important; grid-template-columns: minmax(0,1fr) 73px !important; gap: 8px !important; align-items: stretch; } .sf-progress-main{ min-width: 0; padding: 7px 9px !important; border: 1px solid rgba(255,255,255,.065) !important; background: rgba(7,5,8,.57) !important; } .sf-progress-main small{ color: #a88798; font-size: 5px; } .sf-progress-row{ margin-top: 6px !important; grid-template-columns: minmax(0,1fr) 26px !important; gap: 6px !important; } .sf-progress-line{ height: 7px !important; } /* * No source data yet, so do NOT invent 72%. * keep visual rail empty. */ .sf-progress-line::before{ width: 0% !important; } .sf-progress-row strong{ font-size: 11px !important; } /* remaining days */ .sf-progress-days{ min-width: 73px; padding: 6px !important; border: 1px solid rgba(255,255,255,.065) !important; background: rgba(7,5,8,.62) !important; } .sf-progress-days small{ font-size: 5px; } .sf-progress-days strong{ margin: 1px 0; font-size: 23px !important; } .sf-progress-days span{ font-size: 5px; } /* ======================================================= MAP POSITIONING ======================================================= */ .sf-map-grid{ opacity: .12 !important; } .sf-map-crosshair{ z-index: 8 !important; left: 58% !important; top: 29% !important; width: 51px !important; height: 51px !important; } .sf-map-crosshair::before{ top: -13px !important; height: 76px !important; } .sf-map-crosshair::after{ left: -13px !important; width: 76px !important; } .sf-map-point.point-a{ left: 26% !important; top: 22% !important; } .sf-map-point.point-b{ left: 69% !important; top: 69% !important; } .sf-map-point.point-c{ right: 15% !important; top: 20% !important; } .sf-map-cat{ right: 13% !important; bottom: 12% !important; font-size: 20px !important; } .sf-map-code{ left: auto !important; right: 8px; bottom: 6px; font-size: 5px !important; } /* ======================================================= LOWER ROW concept has two compact command cards ======================================================= */ .sf-operation-bottom{ margin-top: 7px !important; display:grid !important; grid-template-columns: minmax(0,1.15fr) minmax(0,.85fr) !important; gap: 7px !important; } .sf-mission-objective, .sf-special-reward{ min-height: 73px !important; padding: 8px 9px !important; border: 1px solid rgba(255,255,255,.07) !important; background: linear-gradient( 145deg, rgba(255,255,255,.013), rgba(0,0,0,.13) ) !important; } /* objective */ .sf-mission-objective p{ margin: 4px 0 5px !important; color: #b49ca9; font-size: 6px !important; line-height: 1.4; } .sf-mission-objective ul{ display:block !important; } .sf-mission-objective li{ margin: 2px 0; font-size: 5px !important; } /* * concept uses green completed indicators, * but completion state is not stored yet. * use neutral rings instead. */ .sf-mission-objective li::before{ content: "○" !important; color: #df68a7; } /* ======================================================= SPECIAL REWARD ======================================================= */ .sf-special-reward{ display:grid; grid-template-rows: auto 1fr; } .sf-reward-head{ align-items: center !important; } .sf-reward-head strong{ font-size: 6px !important; } .sf-reward-head > span{ color: #ff5cab; font-size: 9px !important; } .sf-reward-thumb{ height: auto !important; min-height: 38px; margin-top: 5px !important; background-position: 57% 42% !important; } /* ======================================================= OPERATION PANEL HEIGHT closer to concept proportions ======================================================= */ .sf-operation-panel{ min-height: 285px !important; } .sf-operation-card{ min-height: 0 !important; height: calc(100% - 61px) !important; } } /* ========================================================= MOBILE Keep the readable stacked version ========================================================= */ @media(max-width:1180px){ .sf-operation-top{ display:grid !important; grid-template-columns: 1fr !important; } .sf-operation-info{ width: auto !important; } .sf-operation-map{ position:relative !important; inset: auto !important; min-height: 220px !important; } } /* ========================================================= YUKINON SPECIAL FORCES V1.8.2 FRAME / BACKGROUND FIDELITY TUNE 完成イメージに寄せるための枠・背景の質感強化 ========================================================= */ /* --------------------------------------------------------- 全体の暗部トーンを少し深く --------------------------------------------------------- */ .sf-page, .sf-main, .sf-shell{ background: radial-gradient( circle at 70% 18%, rgba(255,57,154,.08), transparent 24% ), radial-gradient( circle at 16% 12%, rgba(190,35,108,.05), transparent 20% ), linear-gradient( 180deg, #130811 0%, #09050b 38%, #060308 100% ) !important; } /* --------------------------------------------------------- 共通パネルデザイン 完成イメージの「外枠＋内枠＋上光＋下光」に寄せる --------------------------------------------------------- */ .sf-panel, .sf-rank-panel, .sf-roster-panel, .sf-operation-panel, .sf-benefits-panel, .sf-dogtag-panel{ position:relative; overflow:hidden; border: 1px solid rgba(255,61,157,.34) !important; background: linear-gradient( 180deg, rgba(22,10,19,.96) 0%, rgba(10,5,12,.97) 52%, rgba(8,4,10,.985) 100% ) !important; box-shadow: inset 0 1px 0 rgba(255,179,223,.08), inset 0 -1px 0 rgba(255,54,150,.08), inset 0 0 0 1px rgba(255,255,255,.02), 0 0 0 1px rgba(255,0,128,.035); } /* 内枠 */ .sf-panel::before, .sf-rank-panel::before, .sf-roster-panel::before, .sf-operation-panel::before, .sf-benefits-panel::before, .sf-dogtag-panel::before{ content:""; position:absolute; inset:10px; pointer-events:none; z-index:1; border: 1px solid rgba(255,110,182,.14); box-shadow: inset 0 0 0 1px rgba(255,255,255,.01); } /* 上の薄いハイライト + 下のピンクグロー */ .sf-panel::after, .sf-rank-panel::after, .sf-roster-panel::after, .sf-operation-panel::after, .sf-benefits-panel::after, .sf-dogtag-panel::after{ content:""; position:absolute; inset:0; pointer-events:none; z-index:1; background: linear-gradient( 180deg, rgba(255,255,255,.06) 0, rgba(255,255,255,.015) 8px, transparent 26px ), linear-gradient( 0deg, rgba(255,38,142,.08) 0, transparent 24px ); } /* --------------------------------------------------------- コーナー装飾 完成イメージの機械的な角の演出 --------------------------------------------------------- */ .sf-panel-header, .sf-rank-head, .sf-roster-head, .sf-operation-head, .sf-benefits-head, .sf-dogtag-head{ position:relative; z-index:3; } .sf-panel-header::before, .sf-rank-head::before, .sf-roster-head::before, .sf-operation-head::before, .sf-benefits-head::before, .sf-dogtag-head::before{ content:""; position:absolute; left:8px; top:9px; width:14px; height:14px; pointer-events:none; border-left:2px solid rgba(255,56,154,.8); border-top:2px solid rgba(255,56,154,.8); } .sf-panel-header::after, .sf-rank-head::after, .sf-roster-head::after, .sf-operation-head::after, .sf-benefits-head::after, .sf-dogtag-head::after{ content:""; position:absolute; right:8px; bottom:-8px; width:18px; height:18px; pointer-events:none; border-right:2px solid rgba(255,56,154,.5); border-bottom:2px solid rgba(255,56,154,.5); } /* --------------------------------------------------------- タイトル帯を少し完成イメージ寄りに --------------------------------------------------------- */ .sf-rank-head, .sf-roster-head, .sf-operation-head, .sf-benefits-head, .sf-dogtag-head{ background: linear-gradient( 90deg, rgba(255,63,158,.09), rgba(255,63,158,.03) 34%, transparent 70% ) !important; border-bottom: 1px solid rgba(255,91,173,.12) !important; } .sf-rank-head h2, .sf-roster-head h2, .sf-operation-head h2, .sf-benefits-head h2, .sf-dogtag-head h2{ letter-spacing:.03em; } /* --------------------------------------------------------- セクション内部の質感 うっすらノイズ / スキャンライン --------------------------------------------------------- */ .sf-rank-body, .sf-roster-body, .sf-operation-card, .sf-benefits-body, .sf-dogtag-body{ position:relative; z-index:2; } .sf-rank-body::before, .sf-roster-body::before, .sf-operation-card::before, .sf-benefits-body::before, .sf-dogtag-body::before{ content:""; position:absolute; inset:0; pointer-events:none; z-index:0; background: repeating-linear-gradient( 180deg, rgba(255,255,255,.012) 0, rgba(255,255,255,.012) 1px, transparent 1px, transparent 4px ); opacity:.22; } /* --------------------------------------------------------- HERO 下のランクカード全体の雰囲気調整 --------------------------------------------------------- */ .sf-rank-cards{ position:relative; z-index:2; } .sf-rank-card{ position:relative; overflow:hidden; background: linear-gradient( 180deg, rgba(18,10,18,.97), rgba(9,5,11,.985) ) !important; border: 1px solid rgba(255,98,179,.20) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.05), inset 0 -1px 0 rgba(255,43,145,.11), inset 0 0 0 1px rgba(255,255,255,.02); } .sf-rank-card::before{ content:""; position:absolute; inset:6px; pointer-events:none; border: 1px solid rgba(255,255,255,.05); } .sf-rank-card::after{ content:""; position:absolute; inset:0; pointer-events:none; background: linear-gradient( 90deg, rgba(255,255,255,.05) 0, transparent 15% ), linear-gradient( 0deg, rgba(255,46,151,.10) 0, transparent 18% ); } /* 各カードの背景にうっすら人物感 */ .sf-rank-card .sf-rank-bg{ opacity:.23 !important; filter: grayscale(.12) brightness(.55) contrast(1.08); } /* 完成イメージ寄りの色分け */ .sf-rank-card.rank-silver{ box-shadow: inset 0 1px 0 rgba(255,255,255,.06), inset 0 -1px 0 rgba(235,235,255,.08), 0 0 0 1px rgba(255,255,255,.03); } .sf-rank-card.rank-gold{ border-color:rgba(255,209,96,.26) !important; box-shadow: inset 0 1px 0 rgba(255,240,192,.07), inset 0 -1px 0 rgba(255,202,62,.12), 0 0 0 1px rgba(255,194,72,.03); } .sf-rank-card.rank-platinum{ border-color:rgba(255,92,179,.28) !important; box-shadow: inset 0 1px 0 rgba(255,211,234,.07), inset 0 -1px 0 rgba(255,69,164,.13), 0 0 0 1px rgba(255,73,179,.04); } /* --------------------------------------------------------- ROSTER の空欄も完成イメージ寄りに --------------------------------------------------------- */ .sf-roster-table{ background: linear-gradient( 180deg, rgba(255,255,255,.008), rgba(255,255,255,0) ) !important; } .sf-roster-empty{ color:#907487 !important; letter-spacing:.08em; } /* --------------------------------------------------------- OPERATION BRIEFING さらに完成イメージ寄りの枠・面にする --------------------------------------------------------- */ .sf-operation-card{ background: linear-gradient( 180deg, rgba(16,10,18,.98), rgba(8,5,11,.985) ) !important; } .sf-operation-top{ border: 1px solid rgba(255,86,171,.20) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.04), inset 0 -1px 0 rgba(255,43,141,.08); } .sf-operation-top::after{ content:""; position:absolute; inset:0; pointer-events:none; z-index:7; background: linear-gradient( 180deg, rgba(255,255,255,.022), transparent 14% ), linear-gradient( 0deg, rgba(255,62,160,.045), transparent 18% ); } .sf-operation-map{ background: radial-gradient( circle at 70% 36%, rgba(255,54,150,.18), transparent 14% ), linear-gradient( 145deg, #100913, #07040a ) !important; } .sf-operation-map .sf-map-grid{ opacity:.10 !important; } .sf-operation-bottom{ margin-top:8px !important; } .sf-mission-objective, .sf-special-reward{ background: linear-gradient( 180deg, rgba(255,255,255,.012), rgba(0,0,0,.11) ) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.03), inset 0 -1px 0 rgba(255,51,149,.06); } .sf-reward-thumb{ border: 1px solid rgba(255,98,180,.20) !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.03); } /* --------------------------------------------------------- BENEFITS 背景の人物オーバーレイを強める --------------------------------------------------------- */ .sf-benefits-panel{ position:relative; } .sf-benefits-panel .sf-benefits-bg{ opacity:.26 !important; filter: brightness(.52) saturate(.92) contrast(1.05); } .sf-benefits-list{ position:relative; z-index:3; } .sf-benefit-item{ background: linear-gradient( 90deg, rgba(255,75,161,.06), rgba(255,75,161,.02) 54%, transparent 100% ) !important; border: 1px solid rgba(255,102,181,.15) !important; } .sf-benefit-item::after{ content:""; position:absolute; inset:0; pointer-events:none; background: linear-gradient( 180deg, rgba(255,255,255,.025), transparent 35% ); } /* --------------------------------------------------------- DOG TAG 画像を囲う内枠を強調 --------------------------------------------------------- */ .sf-dogtag-media{ border: 1px solid rgba(255,95,176,.22) !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.025), 0 0 0 1px rgba(255,59,155,.03); } .sf-dogtag-media::before{ content:""; position:absolute; inset:8px; pointer-events:none; border: 1px solid rgba(255,255,255,.04); } /* --------------------------------------------------------- HERO も完成イメージに少し寄せる --------------------------------------------------------- */ .sf-hero-panel{ border: 1px solid rgba(255,61,157,.34) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.05), inset 0 -1px 0 rgba(255,45,149,.08); } .sf-hero-panel::before{ content:""; position:absolute; inset:0; pointer-events:none; background: linear-gradient( 180deg, rgba(255,255,255,.025), transparent 15% ), linear-gradient( 0deg, rgba(255,44,149,.06), transparent 20% ); } /* --------------------------------------------------------- モバイルではやりすぎないように少し抑える --------------------------------------------------------- */ @media(max-width:1180px){ .sf-panel::before, .sf-rank-panel::before, .sf-roster-panel::before, .sf-operation-panel::before, .sf-benefits-panel::before, .sf-dogtag-panel::before{ inset:7px; } .sf-rank-card::before{ inset:4px; } } /* ========================================================= YUKINON SPECIAL FORCES V1.8.3 CONCEPT ASSET RESTORE V1.8.2の共通フレーム指定と V1.8.0完成イメージ素材の競合を解消 ========================================================= */ @media(min-width:1181px){ /* ======================================================= ELITE SUPPORTER RANK 完成イメージの3カードを完全復元 ======================================================= */ .sf-rank-card{ position:relative !important; min-height:0 !important; height:auto !important; aspect-ratio: 2.45 / 1 !important; padding: 0 !important; overflow: hidden !important; clip-path: none !important; border: 0 !important; background-color: #09070a !important; background-repeat: no-repeat !important; background-position: center center !important; background-size: 100% 100% !important; box-shadow: none !important; } .sf-rank-card.rank-100k{ background-image: url( "/assets/images/special-forces-rank-silver-v180.png" ) !important; } .sf-rank-card.rank-200k{ background-image: url( "/assets/images/special-forces-rank-gold-v180.png" ) !important; } .sf-rank-card.rank-300k{ background-image: url( "/assets/images/special-forces-rank-platinum-v180.png" ) !important; } /* * 完成画像の中に * 枠・エンブレム・文字・背景人物が * すでに含まれているため、 * CSS側の追加装飾を完全停止。 */ .sf-rank-card::before, .sf-rank-card::after{ display: none !important; content: none !important; background: none !important; border: 0 !important; box-shadow: none !important; } .sf-rank-card > *{ display: none !important; } /* ======================================================= RANK GRID 画像が縦横に繰り返されないよう固定 ======================================================= */ .sf-rank-grid{ display: grid !important; grid-template-columns: repeat( 3, minmax(0,1fr) ) !important; gap: 10px !important; padding: 10px !important; overflow: hidden !important; background: transparent !important; } .sf-ranks-panel{ overflow: hidden !important; } /* ======================================================= OPERATOR BENEFITS V1.8.0の完成イメージを復元 ======================================================= */ .sf-benefits-panel{ position: relative !important; overflow: hidden !important; border: 0 !important; background: url( "/assets/images/special-forces-benefits-v180.png" ) center center / 100% 100% no-repeat !important; box-shadow: none !important; } /* * V1.8.2で追加した * 共通内枠・グラデーションを停止 */ .sf-benefits-panel::before, .sf-benefits-panel::after{ display: none !important; content: none !important; background: none !important; border: 0 !important; box-shadow: none !important; } /* * 完成画像内にBENEFITS UIが * すでに描かれているためHTML側は非表示 */ .sf-benefits-panel > *{ display: none !important; } /* ======================================================= V1.8.2 FRAME EFFECT 動的パネルだけへ限定 ======================================================= */ .sf-roster-panel, .sf-operation-panel, .sf-dogtag-panel{ border: 1px solid rgba(255,61,157,.34) !important; background: linear-gradient( 180deg, rgba(22,10,19,.96) 0%, rgba(10,5,12,.97) 52%, rgba(8,4,10,.985) 100% ) !important; box-shadow: inset 0 1px 0 rgba(255,179,223,.08), inset 0 -1px 0 rgba(255,54,150,.08), inset 0 0 0 1px rgba(255,255,255,.02); } /* ======================================================= RANK SECTION OUTER FRAME 完成イメージ同様、外側だけ細い枠 ======================================================= */ .sf-ranks-panel{ border: 1px solid rgba(255,62,158,.25) !important; background: linear-gradient( 180deg, rgba(17,9,16,.98), rgba(7,5,9,.99) ) !important; box-shadow: none !important; } .sf-ranks-panel::before, .sf-ranks-panel::after{ display: none !important; content: none !important; } } /* ========================================================= YUKINON SPECIAL FORCES V1.8.4 LOWER COMMAND FIDELITY PASS 完成イメージへ合わせて ROSTER / OPERATION / DOG TAG の 比率・高さ・枠・背景密度を最終調整 ========================================================= */ @media(min-width:1181px){ /* ======================================================= MAIN GRID 完成イメージの実際の比率へ近づける LEFT 38% CENTER 35% RIGHT 27% ======================================================= */ .sf-main{ display:grid !important; grid-template-columns: minmax(0,1.08fr) minmax(0,1fr) minmax(0,.74fr) !important; column-gap: 10px !important; row-gap: 10px !important; align-items: stretch; } /* HERO */ .sf-hero{ grid-column: 1 / -1 !important; } /* ------------------------------------------------------- TOP ROW RANK ≒ 74% BENEFITS ≒ 26% ------------------------------------------------------- */ .sf-ranks-panel{ grid-column: 1 / 3 !important; grid-row: 2 !important; margin: 0 !important; } .sf-benefits-panel{ grid-column: 3 !important; grid-row: 2 !important; margin: 0 !important; } /* ------------------------------------------------------- BOTTOM ROW ROSTER 38% OPERATION 35% DOG TAG 27% ------------------------------------------------------- */ .sf-roster-panel{ grid-column: 1 !important; grid-row: 3 !important; margin: 0 !important; } .sf-operation-panel{ grid-column: 2 !important; grid-row: 3 !important; margin: 0 !important; } .sf-dogtag-panel{ grid-column: 3 !important; grid-row: 3 !important; margin: 0 !important; } /* ======================================================= LOWER ROW HEIGHT ALIGNMENT ======================================================= */ .sf-roster-panel, .sf-operation-panel, .sf-dogtag-panel{ min-width: 0 !important; min-height: 315px !important; align-self: stretch !important; overflow: hidden !important; } /* ======================================================= COMMON LOWER PANEL FRAME ======================================================= */ .sf-roster-panel, .sf-operation-panel, .sf-dogtag-panel{ position: relative; border: 1px solid rgba(255,67,158,.32) !important; background: linear-gradient( 180deg, rgba(19,9,17,.985) 0%, rgba(9,5,11,.99) 46%, rgba(6,4,8,.995) 100% ) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.045), inset 0 -1px 0 rgba(255,51,149,.075) !important; } /* * 完成イメージの左上L字フレーム */ .sf-roster-panel::before, .sf-operation-panel::before, .sf-dogtag-panel::before{ content:""; display:block !important; position:absolute; z-index:20; left:5px; top:5px; width:19px; height:19px; pointer-events:none; border-left: 2px solid #ec4797; border-top: 2px solid #ec4797; background: transparent !important; box-shadow: none !important; } /* * 右下L字フレーム */ .sf-roster-panel::after, .sf-operation-panel::after, .sf-dogtag-panel::after{ content:""; display:block !important; position:absolute; z-index:20; right:5px; bottom:5px; width:19px; height:19px; pointer-events:none; border-right: 2px solid rgba(237,69,153,.62); border-bottom: 2px solid rgba(237,69,153,.62); background: transparent !important; box-shadow: none !important; } /* ======================================================= PANEL HEADERS ======================================================= */ .sf-roster-panel .sf-panel-head, .sf-operation-panel .sf-panel-head, .sf-dogtag-panel .sf-panel-head{ min-height: 46px !important; height: 46px !important; padding: 8px 13px 8px 16px !important; border-bottom: 1px solid rgba(255,79,164,.13) !important; background: linear-gradient( 90deg, rgba(226,51,143,.075), rgba(226,51,143,.018) 44%, transparent 78% ) !important; } .sf-roster-panel .sf-panel-head h2, .sf-operation-panel .sf-panel-head h2, .sf-dogtag-panel .sf-panel-head h2{ font-size: 14px !important; line-height: 1; letter-spacing: .025em; text-shadow: 0 0 11px rgba(255,255,255,.04); } .sf-roster-panel .sf-panel-head small, .sf-operation-panel .sf-panel-head small, .sf-dogtag-panel .sf-panel-head small{ font-size: 5px !important; color: #9e7b8e; } /* ======================================================= ELITE SUPPORTER ROSTER ======================================================= */ .sf-roster-filters{ min-height: 43px; padding: 8px 10px !important; display:flex; align-items:center; gap: 5px !important; border-bottom: 1px solid rgba(255,255,255,.055) !important; background: rgba(4,3,6,.38) !important; } .sf-roster-filters button{ min-height: 28px !important; padding: 0 12px !important; border: 1px solid rgba(255,255,255,.10) !important; background: rgba(3,3,5,.72) !important; color: #a78e9e; font-size: 6px !important; } .sf-roster-filters button.is-active{ color: #fff !important; border-color: #f45baa !important; background: linear-gradient( 90deg, #dc3f91, #a73c7d ) !important; box-shadow: 0 0 10px rgba(238,68,158,.18); } /* table headings */ .sf-roster-head{ min-height: 31px !important; padding: 0 10px !important; border-bottom: 1px solid rgba(255,255,255,.045) !important; background: rgba(255,255,255,.006); } /* * 空の時も完成イメージのように * 大きな暗いデータ領域を残す */ .sf-roster{ min-height: 185px !important; position: relative; background: radial-gradient( circle at 65% 35%, rgba(255,42,146,.025), transparent 27% ), linear-gradient( 180deg, rgba(255,255,255,.005), transparent ); } .sf-roster .sf-empty{ min-height: 185px !important; display:grid !important; place-items: center !important; color: #6f5d69 !important; font-size: 7px !important; letter-spacing: .13em; } /* ======================================================= OPERATION BRIEFING ======================================================= */ .sf-operation-panel{ background: linear-gradient( 180deg, rgba(19,9,17,.99), rgba(7,4,9,.995) ) !important; } .sf-operation-card{ height: calc(100% - 46px) !important; min-height: 0 !important; padding: 9px !important; overflow: hidden !important; background: transparent !important; } /* 上段は完成イメージと同じ比率 */ .sf-operation-top{ min-height: 162px !important; height: 162px !important; border: 1px solid rgba(255,84,170,.17) !important; background: linear-gradient( 90deg, rgba(10,6,11,.97), rgba(8,5,10,.84) ) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.025); } /* LEFT information area */ .sf-operation-info{ width: 45% !important; min-height: 162px !important; padding: 10px 12px !important; } .sf-operation-info h3{ margin-top: 7px !important; font-size: clamp( 15px, 1.13vw, 19px ) !important; } /* RIGHT map */ .sf-operation-map{ left: 42% !important; background: radial-gradient( circle at 66% 45%, rgba(255,61,160,.16), transparent 14% ), linear-gradient( 145deg, rgba(34,10,27,.33), rgba(6,5,8,.92) ) !important; box-shadow: inset 35px 0 48px rgba(7,4,8,.90) !important; } /* * 地図に作戦図らしい道路ラインを追加 */ .sf-operation-map{ background-image: linear-gradient( 28deg, transparent 0 46%, rgba(224,64,152,.13) 46.4%, rgba(224,64,152,.13) 46.8%, transparent 47.2% ), linear-gradient( -24deg, transparent 0 56%, rgba(224,64,152,.10) 56.3%, rgba(224,64,152,.10) 56.7%, transparent 57% ), radial-gradient( circle at 66% 45%, rgba(255,61,160,.16), transparent 14% ), linear-gradient( 145deg, #110913, #070509 ) !important; } /* lower mission panels */ .sf-operation-bottom{ height: 77px !important; margin-top: 7px !important; grid-template-columns: minmax(0,1.14fr) minmax(0,.86fr) !important; } .sf-mission-objective, .sf-special-reward{ min-height: 77px !important; height: 77px !important; overflow: hidden; border-color: rgba(255,255,255,.055) !important; background: linear-gradient( 180deg, rgba(255,255,255,.009), rgba(0,0,0,.08) ) !important; } /* ======================================================= SPECIAL DOG TAG ======================================================= */ .sf-dogtag-panel{ display:flex !important; flex-direction: column; background: #09060a !important; } .sf-dogtag-art{ flex: 1 1 auto; width: auto !important; min-height: 0 !important; height: auto !important; margin: 8px !important; border: 1px solid rgba(255,81,166,.18) !important; background-size: cover !important; background-position: center 39% !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.018) !important; } /* ======================================================= subtle scan lines only for dynamic panels ======================================================= */ .sf-roster-panel > *, .sf-operation-panel > *, .sf-dogtag-panel > *{ position: relative; z-index: 2; } .sf-roster-panel{ background-image: repeating-linear-gradient( 180deg, rgba(255,255,255,.008) 0, rgba(255,255,255,.008) 1px, transparent 1px, transparent 4px ), linear-gradient( 180deg, #130912, #070408 ) !important; } } /* ========================================================= YUKINON SPECIAL FORCES V1.8.5 ONE-ART HERO BACKGROUND HERO と背景を一枚絵のように見せる ========================================================= */ :root{ --sf-hero-wall: url("/assets/images/special-forces-hero-v12-clean.png"); } @media(min-width:1181px){ /* ------------------------------------------------------- MAIN STAGE HERO?上段まで一体背景にする ------------------------------------------------------- */ .sf-main{ position: relative !important; isolation: isolate; overflow: visible !important; } /* * 完成イメージのように * HEROと上段背景を一枚絵として敷く */ .sf-main::before{ content:""; position: absolute; left:0; right:0; top:0; height: 720px; z-index: 0; pointer-events: none; background-image: linear-gradient( 180deg, rgba(9,4,10,.22) 0%, rgba(8,4,9,.08) 18%, rgba(9,4,10,.24) 56%, rgba(9,4,10,.48) 100% ), linear-gradient( 90deg, rgba(8,4,9,.66) 0%, rgba(8,4,9,.18) 24%, rgba(8,4,9,0) 52%, rgba(8,4,9,.14) 76%, rgba(8,4,9,.40) 100% ), var(--sf-hero-wall); background-repeat: no-repeat, no-repeat, no-repeat; background-size: 100% 100%, 100% 100%, cover; background-position: center top, center top, center top; filter: saturate(1.04) contrast(1.03); opacity: 1; } /* * 背景の上に全コンテンツを載せる */ .sf-main > *{ position: relative; z-index: 1; } /* ------------------------------------------------------- HERO PANEL 独立ボックス感を減らす ------------------------------------------------------- */ .sf-hero{ position: relative !important; background: transparent !important; box-shadow: none !important; overflow: hidden !important; } /* * HERO内部の既存背景を薄くして、 * 一枚絵背景を主役にする */ .sf-hero::before{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none; background: linear-gradient( 90deg, rgba(6,4,8,.44) 0%, rgba(6,4,8,.20) 28%, rgba(6,4,8,.06) 52%, rgba(6,4,8,.12) 72%, rgba(6,4,8,.26) 100% ), linear-gradient( 180deg, rgba(255,52,154,.05), rgba(0,0,0,0) ); } .sf-hero > *{ position:relative; z-index:1; } /* * HEROまわりの背景をなるべく透明化 * 一枚絵を見せる */ .sf-hero, .sf-hero-inner, .sf-hero-stage, .sf-hero-copy, .sf-hero-copy-wrap, .sf-hero-visual{ background: transparent !important; } /* ------------------------------------------------------- HERO 下の上段 一枚絵の上に載っている半透明パネルにする ------------------------------------------------------- */ .sf-ranks-panel, .sf-benefits-panel{ position: relative; background: linear-gradient( 180deg, rgba(17,8,16,.76) 0%, rgba(9,5,10,.84) 56%, rgba(7,4,8,.90) 100% ) !important; backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); border: 1px solid rgba(255,66,156,.30) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.03), 0 0 0 1px rgba(255,0,128,.04) !important; } /* * 完成イメージのような * 上段全体のなじみを出す */ .sf-ranks-panel::before, .sf-benefits-panel::before{ content:""; position:absolute; inset:0; pointer-events:none; background: linear-gradient( 90deg, rgba(255,67,158,.04), rgba(255,67,158,0) 32%, rgba(255,67,158,.03) 100% ); z-index:0; } .sf-ranks-panel > *, .sf-benefits-panel > *{ position:relative; z-index:1; } /* ------------------------------------------------------- BENEFITS 右側も一枚絵のつながりを感じるように ------------------------------------------------------- */ .sf-benefits-panel{ overflow: hidden !important; } .sf-benefits-panel::after{ content:""; position:absolute; inset:0; pointer-events:none; z-index:0; background: linear-gradient( 90deg, rgba(8,5,10,.08) 0%, rgba(8,5,10,0) 48%, rgba(8,5,10,.22) 100% ); } /* ------------------------------------------------------- ELITE SUPPORTER RANK 背景のつながりを少し見せる ------------------------------------------------------- */ .sf-rank-cards, .sf-ranks-panel .sf-panel-body, .sf-ranks-panel .sf-panel-content{ background: transparent !important; } /* * 上段パネルの下端ラインを少し柔らかくする */ .sf-ranks-panel{ border-bottom-color: rgba(255,80,165,.22) !important; } .sf-benefits-panel{ border-bottom-color: rgba(255,80,165,.22) !important; } /* ------------------------------------------------------- HERO直下の空気感 ------------------------------------------------------- */ .sf-ranks-panel, .sf-benefits-panel{ margin-top: 0 !important; } /* * HEROと上段の境界を少しだけ一体化 */ .sf-hero + .sf-ranks-panel, .sf-main .sf-ranks-panel{ box-shadow: inset 0 1px 0 rgba(255,255,255,.03), 0 -10px 30px rgba(255,41,148,.04), 0 0 0 1px rgba(255,0,128,.04) !important; } /* ------------------------------------------------------- 既存の下段は維持 ------------------------------------------------------- */ .sf-roster-panel, .sf-operation-panel, .sf-dogtag-panel{ position:relative; z-index:1; } } /* ========================================================= 1180px以下では、 一枚絵の強さを少し弱めて破綻を防ぐ ========================================================= */ @media(max-width:1180px){ .sf-main{ position:relative; isolation:isolate; } .sf-main::before{ content:""; position:absolute; left:0; right:0; top:0; height:460px; z-index:0; pointer-events:none; background-image: linear-gradient( 180deg, rgba(9,4,10,.30), rgba(9,4,10,.52) ), var(--sf-hero-wall); background-repeat: no-repeat, no-repeat; background-size: 100% 100%, cover; background-position: center top, center top; opacity:.92; } .sf-main > *{ position:relative; z-index:1; } .sf-hero, .sf-ranks-panel, .sf-benefits-panel{ background: rgba(10,5,11,.78) !important; } } /* ========================================================= YUKINON SPECIAL FORCES V1.8.6 ONE-ART CORRECTION V1.8.5の巨大HERO背景を停止し、 同じ完成イメージから切り出した素材を 隙間なく接続して一枚絵として見せる ========================================================= */ /* ========================================================= V1.8.5 WALL BACKGROUND OFF ========================================================= */ .sf-main::before{ display: none !important; content: none !important; background: none !important; } /* ========================================================= DESKTOP ========================================================= */ @media(min-width:1181px){ /* ------------------------------------------------------- MAIN ------------------------------------------------------- */ .sf-main{ position: relative !important; isolation: auto !important; background: #080409 !important; row-gap: 8px !important; column-gap: 8px !important; } /* ======================================================= HERO 完成イメージそのものを復元 ======================================================= */ .sf-hero{ position: relative !important; grid-column: 1 / -1 !important; display: block !important; width: auto !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; aspect-ratio: 1672 / 266 !important; margin: 0 -24px !important; padding: 0 !important; overflow: hidden !important; border: 0 !important; border-bottom: 1px solid rgba(255,64,158,.38) !important; background-image: url( "/assets/images/special-forces-concept-hero-v180.png" ) !important; background-repeat: no-repeat !important; background-position: center center !important; background-size: 100% 100% !important; box-shadow: none !important; filter: none !important; } /* * 完成HERO画像内に * SPECIAL FORCES / Yukinon / キャラ / * 車両 / 作戦室 / コピーが全部存在するので * HTML描画は重ねない。 */ .sf-hero::before, .sf-hero::after, .sf-hero > *{ display: none !important; content: none !important; } /* ======================================================= ELITE SUPPORTER RANK 同じ元イメージの3カードを接続 ======================================================= */ .sf-ranks-panel{ position: relative !important; overflow: hidden !important; margin: 0 !important; border: 1px solid rgba(255,65,159,.27) !important; background: linear-gradient( 180deg, #130912, #080509 ) !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } .sf-ranks-panel::before, .sf-ranks-panel::after{ display: none !important; content: none !important; } .sf-rank-grid{ display: grid !important; grid-template-columns: repeat( 3, minmax(0,1fr) ) !important; gap: 8px !important; padding: 8px !important; overflow: hidden !important; background: transparent !important; } .sf-rank-card{ position: relative !important; width: 100% !important; height: auto !important; min-height: 0 !important; aspect-ratio: 2.45 / 1 !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; border: 0 !important; clip-path: none !important; background-repeat: no-repeat !important; background-position: center !important; background-size: 100% 100% !important; box-shadow: none !important; filter: none !important; } .sf-rank-card.rank-100k{ background-image: url( "/assets/images/special-forces-rank-silver-v180.png" ) !important; } .sf-rank-card.rank-200k{ background-image: url( "/assets/images/special-forces-rank-gold-v180.png" ) !important; } .sf-rank-card.rank-300k{ background-image: url( "/assets/images/special-forces-rank-platinum-v180.png" ) !important; } .sf-rank-card::before, .sf-rank-card::after, .sf-rank-card > *{ display: none !important; content: none !important; } /* ======================================================= OPERATOR BENEFITS 完成イメージへ完全復帰 ======================================================= */ .sf-benefits-panel{ position: relative !important; margin: 0 !important; overflow: hidden !important; border: 0 !important; background-image: url( "/assets/images/special-forces-benefits-v180.png" ) !important; background-repeat: no-repeat !important; background-position: center !important; background-size: 100% 100% !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } .sf-benefits-panel::before, .sf-benefits-panel::after, .sf-benefits-panel > *{ display: none !important; content: none !important; } /* ======================================================= HERO → RANK / BENEFITS 一枚絵として見える接続感 ======================================================= */ .sf-hero{ margin-bottom: 0 !important; } .sf-ranks-panel, .sf-benefits-panel{ margin-top: 0 !important; } /* * セクション間に大きな背景色の断絶を作らない */ .sf-main{ background: linear-gradient( 180deg, #120711 0%, #09050a 54%, #070408 100% ) !important; } /* ======================================================= LOWER COMMAND V1.8.4を維持 ======================================================= */ .sf-roster-panel, .sf-operation-panel, .sf-dogtag-panel{ backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } } /* ========================================================= MOBILE / TABLET V1.8.5の巨大背景だけ停止して、 これまでのレスポンシブHTMLへ戻す ========================================================= */ @media(max-width:1180px){ .sf-main::before{ display: none !important; content: none !important; } .sf-main{ background: linear-gradient( 180deg, #10070f, #070408 ) !important; } } /* ========================================================= YUKINON SPECIAL FORCES V1.8.7 FINAL ONE-ART SEAM PASS HERO / RANK / BENEFITS の完成画像は維持し、 背景・境界・余白だけを完成イメージへ寄せる ========================================================= */ @media(min-width:1181px){ /* ======================================================= WHOLE COMMAND STAGE HEROの世界観を薄くページ背景へ引き継ぐ ======================================================= */ .sf-main{ position: relative !important; isolation: isolate !important; /* * HERO画像そのものを拡大表示するのではなく、 * ごく薄い背景としてのみ再利用。 */ background: linear-gradient( 180deg, rgba(8,4,9,.06) 0px, rgba(8,4,9,.16) 310px, rgba(10,5,11,.72) 510px, #080409 760px ), url( "/assets/images/special-forces-concept-hero-v180.png" ) center top / 100% auto no-repeat, #080409 !important; /* * V1.3由来の大きな下余白を削減 */ margin: 0 auto 20px !important; column-gap: 8px !important; /* * HEROとRANKを連続させるため * grid自体の縦gapは消す */ row-gap: 0 !important; } .sf-main > *{ position: relative; z-index: 2; } /* ======================================================= HERO → RANK / BENEFITS 完成イメージのように直接接続 ======================================================= */ .sf-hero{ margin-bottom: 0 !important; border-bottom: 1px solid rgba(255,55,153,.34) !important; } .sf-ranks-panel, .sf-benefits-panel{ margin-top: 0 !important; border-top: 0 !important; } /* * HEROの下辺と上段のパネルを * 1本のピンクラインで連続して見せる */ .sf-ranks-panel::after{ content:""; display:block !important; position:absolute; z-index:30; left:0; right:0; top:0; height:1px; pointer-events:none; background: linear-gradient( 90deg, rgba(255,72,163,.40), rgba(255,94,177,.13) 58%, transparent ); border:0 !important; box-shadow: 0 0 8px rgba(255,48,151,.08); } .sf-benefits-panel::after{ content:""; display:block !important; position:absolute; z-index:30; left:0; right:0; top:0; height:1px; pointer-events:none; background: linear-gradient( 90deg, rgba(255,72,163,.22), rgba(255,72,163,.42), rgba(255,72,163,.12) ); border:0 !important; box-shadow:none !important; } /* ======================================================= RANK / BENEFITS → LOWER COMMAND ここだけ完成イメージと同程度の間隔を残す ======================================================= */ .sf-roster-panel, .sf-operation-panel, .sf-dogtag-panel{ margin-top: 10px !important; } /* ======================================================= RANK PANEL 上下の余白をわずかに詰める ======================================================= */ .sf-rank-grid{ padding: 8px 8px 7px !important; } /* ======================================================= LOWER PANELS 外周だけ少し透明感を足して背景と馴染ませる ======================================================= */ .sf-roster-panel, .sf-operation-panel, .sf-dogtag-panel{ background: linear-gradient( 180deg, rgba(18,8,16,.965) 0%, rgba(8,4,10,.982) 48%, rgba(6,3,8,.99) 100% ) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.035), inset 0 -1px 0 rgba(255,52,149,.065), 0 6px 22px rgba(0,0,0,.13) !important; } /* ======================================================= ROSTER EMPTY AREA データを捏造せず、空欄でも作戦端末らしく見せる ======================================================= */ .sf-roster{ position: relative; background: radial-gradient( circle at 53% 42%, rgba(236,55,150,.026), transparent 28% ), repeating-linear-gradient( 180deg, rgba(255,255,255,.006) 0, rgba(255,255,255,.006) 1px, transparent 1px, transparent 5px ), linear-gradient( 180deg, rgba(255,255,255,.004), transparent ) !important; } .sf-roster::after{ content:""; position:absolute; left:50%; top:55%; width:92px; height:92px; transform: translate(-50%,-50%); pointer-events:none; opacity:.07; border: 1px solid #ef4da0; border-radius: 50%; background: linear-gradient( transparent calc(50% - .5px), #ef4da0 50%, transparent calc(50% + .5px) ), linear-gradient( 90deg, transparent calc(50% - .5px), #ef4da0 50%, transparent calc(50% + .5px) ); } /* ======================================================= OPERATION BRIEFING mapを少しだけ鮮明にして完成イメージへ ======================================================= */ .sf-operation-map{ background-image: linear-gradient( 28deg, transparent 0 45.7%, rgba(236,65,156,.15) 46%, rgba(236,65,156,.15) 46.45%, transparent 46.75% ), linear-gradient( -26deg, transparent 0 56%, rgba(236,65,156,.11) 56.3%, rgba(236,65,156,.11) 56.7%, transparent 57% ), radial-gradient( circle at 66% 44%, rgba(255,61,160,.18), transparent 15% ), linear-gradient( 145deg, #120914, #070509 ) !important; } .sf-map-crosshair{ filter: drop-shadow( 0 0 5px rgba(255,69,163,.30) ); } /* ======================================================= DOG TAG 完成イメージ同様に画像をできるだけ大きく見せる ======================================================= */ .sf-dogtag-art{ margin: 7px !important; background-position: center 42% !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.02), inset 0 0 28px rgba(0,0,0,.11) !important; } /* ======================================================= FOOTER GAP 現在残っている大きな黒い余白を削減 ======================================================= */ .sf-footer{ margin-top: 12px !important; } } /* ========================================================= MOBILE / TABLET 既存レスポンシブは維持 ========================================================= */ @media(max-width:1180px){ .sf-main{ margin-bottom: 18px !important; } } /* ========================================================= YUKINON SPECIAL FORCES V1.8.8 FINAL FIDELITY PASS HERO / RANK / BENEFITS は変更しない。 下段COMMAND UIのみ最終調整。 ========================================================= */ @media(min-width:1181px){ /* ======================================================= LOWER COMMAND GRID ======================================================= */ .sf-main{ grid-template-columns: minmax(0,1.06fr) minmax(0,1fr) minmax(0,.73fr) !important; column-gap: 8px !important; } .sf-roster-panel, .sf-operation-panel, .sf-dogtag-panel{ min-height: 318px !important; height: 318px !important; align-self: stretch !important; overflow: hidden !important; } /* ======================================================= HUD FRAME 枠を少し細く暗くし、線ではなくHUD感へ ======================================================= */ .sf-roster-panel, .sf-operation-panel, .sf-dogtag-panel{ border: 1px solid rgba(242,65,153,.25) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.025), inset 0 -1px 0 rgba(255,52,150,.045) !important; background: linear-gradient( 180deg, rgba(17,8,16,.985), rgba(8,4,10,.992) ) !important; } .sf-roster-panel::before, .sf-operation-panel::before, .sf-dogtag-panel::before{ width: 15px !important; height: 15px !important; left: 5px !important; top: 5px !important; border-left: 1px solid rgba(255,75,163,.82) !important; border-top: 1px solid rgba(255,75,163,.82) !important; } .sf-roster-panel::after, .sf-operation-panel::after, .sf-dogtag-panel::after{ width: 15px !important; height: 15px !important; right: 5px !important; bottom: 5px !important; border-right: 1px solid rgba(255,75,163,.48) !important; border-bottom: 1px solid rgba(255,75,163,.48) !important; } /* ======================================================= PANEL HEADERS ======================================================= */ .sf-roster-panel .sf-panel-head, .sf-operation-panel .sf-panel-head, .sf-dogtag-panel .sf-panel-head{ height: 43px !important; min-height: 43px !important; padding: 7px 12px 7px 16px !important; border-bottom: 1px solid rgba(255,75,163,.10) !important; background: linear-gradient( 90deg, rgba(225,48,141,.055), rgba(225,48,141,.012) 45%, transparent 78% ) !important; } .sf-roster-panel .sf-panel-head h2, .sf-operation-panel .sf-panel-head h2, .sf-dogtag-panel .sf-panel-head h2{ font-size: 13px !important; line-height: 1 !important; letter-spacing: .025em; } /* ======================================================= ROSTER ======================================================= */ .sf-roster-filters{ min-height: 39px !important; padding: 6px 9px !important; gap: 5px !important; background: rgba(4,3,6,.28) !important; border-bottom: 1px solid rgba(255,255,255,.04) !important; } .sf-roster-filters button{ min-height: 25px !important; padding: 0 10px !important; font-size: 5px !important; } .sf-roster-head{ min-height: 28px !important; padding: 0 9px !important; } .sf-roster{ min-height: 198px !important; background: radial-gradient( circle at 50% 50%, rgba(238,57,151,.022), transparent 29% ), repeating-linear-gradient( 180deg, rgba(255,255,255,.005) 0, rgba(255,255,255,.005) 1px, transparent 1px, transparent 5px ), linear-gradient( 180deg, rgba(255,255,255,.003), transparent ) !important; } .sf-roster::after{ width: 70px !important; height: 70px !important; opacity: .045 !important; } .sf-roster .sf-empty{ min-height: 198px !important; font-size: 6px !important; color: #6d5965 !important; } /* ======================================================= OPERATION BRIEFING ======================================================= */ .sf-operation-card{ height: calc(100% - 43px) !important; padding: 7px !important; background: transparent !important; } .sf-operation-top{ height: 165px !important; min-height: 165px !important; border: 1px solid rgba(255,78,165,.14) !important; background: linear-gradient( 90deg, rgba(10,6,11,.97), rgba(7,4,9,.76) ) !important; } .sf-operation-info{ width: 46% !important; min-height: 165px !important; padding: 10px 11px !important; } .sf-operation-info h3{ margin: 7px 0 2px !important; font-size: clamp( 15px, 1.05vw, 18px ) !important; letter-spacing: .01em; } /* * MAPを完成イメージの「作戦地図」っぽく */ .sf-operation-map{ left: 41% !important; background-image: linear-gradient( 24deg, transparent 0 44%, rgba(232,60,151,.13) 44.3%, rgba(232,60,151,.13) 44.7%, transparent 45% ), linear-gradient( -29deg, transparent 0 58%, rgba(232,60,151,.10) 58.3%, rgba(232,60,151,.10) 58.7%, transparent 59% ), linear-gradient( 63deg, transparent 0 69%, rgba(232,60,151,.065) 69.2%, rgba(232,60,151,.065) 69.5%, transparent 69.8% ), radial-gradient( circle at 66% 43%, rgba(255,61,160,.17), transparent 15% ), linear-gradient( 145deg, #100812, #070509 ) !important; box-shadow: inset 30px 0 42px rgba(7,4,8,.88) !important; } .sf-map-grid{ opacity: .075 !important; } .sf-map-crosshair{ width: 46px !important; height: 46px !important; left: 62% !important; top: 32% !important; } .sf-map-point{ font-size: 10px !important; } .sf-operation-bottom{ height: 80px !important; margin-top: 6px !important; gap: 6px !important; } .sf-mission-objective, .sf-special-reward{ height: 80px !important; min-height: 80px !important; padding: 7px 8px !important; border: 1px solid rgba(255,255,255,.045) !important; } .sf-reward-thumb{ margin-top: 4px !important; min-height: 35px !important; } /* ======================================================= SPECIAL DOG TAG ======================================================= */ .sf-dogtag-panel{ display: flex !important; flex-direction: column !important; } .sf-dogtag-art{ flex: 1 1 auto !important; width: auto !important; height: auto !important; min-height: 0 !important; margin: 6px !important; border: 1px solid rgba(255,79,166,.15) !important; background-size: 111% auto !important; background-position: center 36% !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.015), inset 0 0 24px rgba(0,0,0,.10) !important; } /* ======================================================= LOWER BACKGROUND / PAGE END ======================================================= */ .sf-main{ margin-bottom: 4px !important; } .sf-footer{ margin-top: 5px !important; padding-top: 8px !important; padding-bottom: 10px !important; } } /* ========================================================= MOBILE / TABLET PC最終調整を持ち込まない ========================================================= */ @media(max-width:1180px){ .sf-roster-panel, .sf-operation-panel, .sf-dogtag-panel{ height: auto !important; } } /* ========================================================= YUKINON SPECIAL FORCES V1.8.9 OPERATION EXACT VISUAL PASS ========================================================= */ @media(min-width:1181px){ /* ======================================================= OUTER PANEL ======================================================= */ .sf-operation-panel{ border: 1px solid rgba(255,76,164,.28) !important; border-radius: 7px !important; background: linear-gradient( 180deg, rgba(18,8,17,.985), rgba(7,4,9,.995) ) !important; overflow: hidden !important; } .sf-operation-panel .sf-panel-head{ height: 42px !important; min-height: 42px !important; padding: 7px 12px 7px 16px !important; background: linear-gradient( 90deg, rgba(222,48,141,.065), transparent 64% ) !important; border-bottom: 1px solid rgba(255,73,161,.12) !important; } /* ======================================================= OPERATION BODY ======================================================= */ .sf-operation-card{ height: calc(100% - 42px) !important; padding: 7px !important; background: transparent !important; } /* ======================================================= TOP COMMAND MONITOR 完成イメージ同様、 TEXT + MAP を1枚の画面にする ======================================================= */ .sf-operation-top{ position: relative !important; display: block !important; height: 158px !important; min-height: 158px !important; overflow: hidden !important; border: 1px solid rgba(255,83,170,.21) !important; border-radius: 5px !important; background: #09060b !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.025) !important; } /* ======================================================= ACTUAL CONCEPT MAP ART ======================================================= */ .sf-operation-map{ position: absolute !important; z-index: 1 !important; top: 0 !important; right: 0 !important; bottom: 0 !important; left: 41% !important; width: auto !important; height: auto !important; min-height: 0 !important; border: 0 !important; background-image: linear-gradient( 90deg, rgba(9,6,11,.97) 0%, rgba(9,6,11,.55) 14%, rgba(9,6,11,.09) 34%, transparent 54% ), linear-gradient( 180deg, rgba(5,3,7,.04), rgba(5,3,7,.08) ), url( "/assets/images/special-forces-operation-map-v189.png" ) !important; background-repeat: no-repeat, no-repeat, no-repeat !important; background-position: center, center, center center !important; background-size: 100% 100%, 100% 100%, cover !important; box-shadow: inset 28px 0 33px rgba(8,5,10,.68) !important; } /* * 新しい背景画像自体に * GRID / CROSSHAIR / CAT / ROUTE があるので、 * CSS描画版は重ねない。 */ .sf-operation-map .sf-map-grid, .sf-operation-map .sf-map-point, .sf-operation-map .sf-map-route, .sf-operation-map .sf-map-crosshair, .sf-operation-map .sf-map-cat, .sf-operation-map .sf-map-code{ display: none !important; } .sf-operation-map::before{ content:""; position: absolute; inset: 0; z-index: 4; pointer-events: none; background: linear-gradient( 90deg, rgba(8,5,10,.80), rgba(8,5,10,.28) 25%, transparent 52% ) !important; } .sf-operation-map::after{ content:""; position: absolute; inset: 0; z-index: 5; pointer-events: none; background: linear-gradient( 180deg, rgba(255,255,255,.018), transparent 22%, rgba(0,0,0,.10) ) !important; box-shadow: inset 0 0 20px rgba(0,0,0,.22) !important; } /* ======================================================= TEXT OVERLAY ======================================================= */ .sf-operation-info{ position: relative !important; z-index: 10 !important; width: 52% !important; min-height: 158px !important; padding: 10px 12px !important; display: flex !important; flex-direction: column !important; border: 0 !important; background: transparent !important; } .sf-operation-label{ position: relative; justify-content: flex-start !important; gap: 10px !important; padding-left: 8px; } /* * 完成イメージ左上の発光縦ライン */ .sf-operation-label::before{ content:""; position: absolute; left: 0; top: -2px; width: 2px; height: 17px; background: #f04d9f; box-shadow: 0 0 8px rgba(255,72,164,.72); } .sf-operation-label small{ color: #ed5ca8; font-size: 6px !important; font-weight: 900; letter-spacing: .12em; } .sf-operation-label span{ color: #9d7d8e; font-size: 5px !important; } /* ======================================================= TITLE ======================================================= */ .sf-operation-info h3{ margin: 7px 0 2px !important; max-width: none !important; white-space: nowrap; color: #fff; font-family: Georgia, "Times New Roman", serif; font-size: clamp( 15px, 1.10vw, 19px ) !important; line-height: 1 !important; letter-spacing: .005em; } .sf-operation-jp{ margin: 2px 0 0 !important; color: #b690a4; font-size: 6px !important; } /* ======================================================= PROGRESS + REMAINING target位置へ ======================================================= */ .sf-mission-progress{ margin-top: auto !important; width: 100%; display: grid !important; grid-template-columns: minmax(0,1fr) 64px !important; gap: 7px !important; align-items: end; } .sf-progress-main{ padding: 5px 7px !important; border: 0 !important; background: transparent !important; } .sf-progress-main small{ font-size: 5px !important; color: #aa8298; } .sf-progress-row{ margin-top: 5px !important; grid-template-columns: minmax(0,1fr) 24px !important; } .sf-progress-line{ height: 6px !important; border: 1px solid rgba(255,92,175,.35) !important; border-radius: 2px; background: rgba(4,3,6,.68) !important; } .sf-progress-row strong{ font-size: 10px !important; color: #ef68ae; } /* remaining */ .sf-progress-days{ padding: 5px !important; border: 1px solid rgba(255,255,255,.055) !important; border-radius: 3px; background: rgba(5,3,7,.66) !important; } .sf-progress-days small{ font-size: 4px !important; } .sf-progress-days strong{ font-size: 20px !important; line-height: 1; } .sf-progress-days span{ font-size: 4px !important; } /* ======================================================= LOWER TWO CARDS ======================================================= */ .sf-operation-bottom{ height: 82px !important; margin-top: 6px !important; display: grid !important; grid-template-columns: minmax(0,1.12fr) minmax(0,.88fr) !important; gap: 6px !important; } .sf-mission-objective, .sf-special-reward{ height: 82px !important; min-height: 82px !important; padding: 7px 8px !important; border: 1px solid rgba(255,255,255,.055) !important; border-radius: 4px; background: linear-gradient( 180deg, rgba(255,255,255,.010), rgba(0,0,0,.10) ) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.018); } /* mission objective */ .sf-mission-objective small{ position: relative; padding-left: 7px; } .sf-mission-objective small::before{ content:""; position: absolute; left: 0; top: -2px; width: 2px; height: 14px; background: #ef4d9f; box-shadow: 0 0 7px rgba(255,67,158,.50); } .sf-mission-objective p{ margin: 4px 0 5px !important; font-size: 6px !important; color: #baa1ae; } .sf-mission-objective li{ margin: 2px 0 !important; font-size: 5px !important; } /* ======================================================= SPECIAL REWARD ======================================================= */ .sf-special-reward small{ font-size: 5px !important; } .sf-reward-head strong{ font-size: 6px !important; } .sf-reward-thumb{ min-height: 42px !important; height: 42px !important; margin-top: 4px !important; border: 1px solid rgba(255,76,166,.20) !important; background-position: center 42% !important; } } /* ========================================================= YUKINON SPECIAL FORCES V1.9.0 OPERATION MAP FIT V1.8.9のマップ拡大を修正し、 完成イメージの横長作戦画面へ近づける ========================================================= */ @media(min-width:1181px){ /* ======================================================= MAP AREA 完成イメージでは 左 = OPERATION情報 右 = 桜 / 夜景 / 作戦MAP がほぼ半々 ======================================================= */ .sf-operation-map{ left: 49% !important; right: 0 !important; /* * coverをやめる。 * 画像全体を必ず表示することで * 照準器・猫・夜景が巨大化しない。 */ background-size: 100% 100%, 100% 100%, 100% 100% !important; background-position: center, center, center !important; box-shadow: inset 20px 0 28px rgba(8,5,10,.58) !important; } /* ======================================================= MAP → TEXT BLEND 左端だけ自然に暗くして接続 ======================================================= */ .sf-operation-map::before{ background: linear-gradient( 90deg, rgba(8,5,10,.96) 0%, rgba(8,5,10,.63) 8%, rgba(8,5,10,.22) 18%, rgba(8,5,10,.04) 29%, transparent 40% ) !important; } .sf-operation-map::after{ background: linear-gradient( 180deg, rgba(255,255,255,.015), transparent 22%, rgba(0,0,0,.08) ) !important; box-shadow: inset 0 0 16px rgba(0,0,0,.17) !important; } /* ======================================================= INFORMATION AREA 完成イメージの左半分に合わせる ======================================================= */ .sf-operation-info{ width: 53% !important; padding: 9px 11px !important; } /* ======================================================= TITLE 現在より少しだけ小さくして 完成イメージの比率へ ======================================================= */ .sf-operation-info h3{ font-size: clamp( 14px, 1.02vw, 18px ) !important; margin: 7px 0 2px !important; } .sf-operation-jp{ font-size: 5px !important; letter-spacing: .03em; } /* ======================================================= PROGRESS AREA 下辺へ寄せて完成イメージの配置へ ======================================================= */ .sf-mission-progress{ width: 96% !important; grid-template-columns: minmax(0,1fr) 61px !important; gap: 7px !important; } .sf-progress-main{ padding: 5px 6px !important; } .sf-progress-days{ min-width: 61px !important; padding: 5px 4px !important; } /* ======================================================= OPERATION MONITOR FRAME ======================================================= */ .sf-operation-top{ border-color: rgba(255,83,170,.18) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.022), inset 0 -1px 0 rgba(255,52,150,.035) !important; } } /* ========================================================= YUKINON SPECIAL FORCES V1.9.1 OPERATION COMPOSITION FINAL 完成イメージに合わせて OPERATION BRIEFINGだけ最終調整 ========================================================= */ @media(min-width:1181px){ /* ======================================================= TOP MONITOR ======================================================= */ .sf-operation-top{ height: 158px !important; min-height: 158px !important; background: linear-gradient( 90deg, #080509 0%, #09050a 42%, #0a060b 100% ) !important; } /* ======================================================= MAP 画像を横へ引き伸ばさず、 完成イメージのように右側へ自然比率で配置 ======================================================= */ .sf-operation-map{ left: 42% !important; right: 0 !important; background-image: linear-gradient( 90deg, rgba(8,5,10,.98) 0%, rgba(8,5,10,.88) 10%, rgba(8,5,10,.48) 22%, rgba(8,5,10,.14) 36%, transparent 54% ), linear-gradient( 180deg, rgba(4,3,6,.03), rgba(4,3,6,.08) ), url( "/assets/images/special-forces-operation-map-v189.png" ) !important; background-repeat: no-repeat, no-repeat, no-repeat !important; /* * ここが今回の重要ポイント。 * 画像そのものは縦横比を維持。 */ background-size: 100% 100%, 100% 100%, auto 100% !important; background-position: center, center, right center !important; box-shadow: none !important; } /* ======================================================= MAP OVERLAY 二重に暗くならないよう軽量化 ======================================================= */ .sf-operation-map::before{ background: linear-gradient( 90deg, rgba(8,5,10,.66) 0%, rgba(8,5,10,.24) 22%, transparent 47% ) !important; } .sf-operation-map::after{ background: linear-gradient( 180deg, rgba(255,255,255,.012), transparent 28%, rgba(0,0,0,.07) ) !important; box-shadow: inset 0 0 12px rgba(0,0,0,.14) !important; } /* ======================================================= LEFT OPERATION INFO ======================================================= */ .sf-operation-info{ width: 55% !important; min-height: 158px !important; padding: 9px 11px 8px !important; } .sf-operation-label{ gap: 8px !important; } .sf-operation-info h3{ margin: 7px 0 2px !important; font-size: clamp( 14px, .98vw, 17px ) !important; line-height: 1 !important; letter-spacing: 0 !important; } .sf-operation-jp{ margin: 2px 0 0 !important; font-size: 5px !important; } /* ======================================================= MISSION PROGRESS 完成イメージのように 横長レールを下へ配置 ======================================================= */ .sf-mission-progress{ width: 92% !important; margin-top: auto !important; grid-template-columns: minmax(0,1fr) 62px !important; gap: 8px !important; } .sf-progress-main{ padding: 5px 6px !important; background: rgba(4,3,6,.18) !important; } .sf-progress-row{ margin-top: 5px !important; grid-template-columns: minmax(0,1fr) 25px !important; } .sf-progress-line{ height: 6px !important; border-radius: 2px; border: 1px solid rgba(255,85,171,.35) !important; background: rgba(2,2,4,.68) !important; } .sf-progress-days{ min-width: 62px !important; padding: 5px !important; background: rgba(4,3,6,.38) !important; } /* ======================================================= LOWER COMMAND CARDS ======================================================= */ .sf-operation-bottom{ height: 84px !important; margin-top: 6px !important; grid-template-columns: minmax(0,1.16fr) minmax(0,.84fr) !important; gap: 6px !important; } .sf-mission-objective, .sf-special-reward{ height: 84px !important; min-height: 84px !important; padding: 7px 8px !important; border: 1px solid rgba(255,255,255,.05) !important; background: linear-gradient( 180deg, rgba(255,255,255,.008), rgba(0,0,0,.085) ) !important; } /* ======================================================= MISSION OBJECTIVE ======================================================= */ .sf-mission-objective p{ margin: 4px 0 5px !important; line-height: 1.35; font-size: 5px !important; } .sf-mission-objective ul{ margin: 0 !important; } .sf-mission-objective li{ margin: 1px 0 !important; line-height: 1.25; font-size: 5px !important; } /* ======================================================= SPECIAL REWARD 完成イメージより少し大きく ======================================================= */ .sf-reward-head{ min-height: 17px; } .sf-reward-thumb{ height: 48px !important; min-height: 48px !important; margin-top: 3px !important; background-size: cover !important; background-position: center 42% !important; } } /* ========================================================= YUKINON SPECIAL FORCES V1.9.2 OPERATION SEAMLESS MAP MAPを独立した右カードではなく、 上段全体へ広がる作戦背景として再構成 ========================================================= */ @media(min-width:1181px){ /* ======================================================= TOP COMMAND MONITOR ======================================================= */ .sf-operation-top{ position: relative !important; display: block !important; height: 158px !important; min-height: 158px !important; overflow: hidden !important; background: #080509 !important; } /* ======================================================= MAP 完成イメージではMAPが 右側だけでなく中央近くまで広がっている ======================================================= */ .sf-operation-map{ position: absolute !important; z-index: 1 !important; top: 0 !important; right: 0 !important; bottom: 0 !important; /* * 現在の約50% → 31% * MAPを大きく左へ拡張 */ left: 31% !important; width: auto !important; height: auto !important; min-height: 0 !important; border: 0 !important; /* * 元画像を横長作戦画面に合わせる。 * * coverでは照準が巨大化し、 * auto 100%ではMAPが小さくなるため、 * 完成イメージ優先で全面フィット。 */ background-image: linear-gradient( 90deg, rgba(8,5,10,1) 0%, rgba(8,5,10,.96) 10%, rgba(8,5,10,.78) 22%, rgba(8,5,10,.44) 36%, rgba(8,5,10,.12) 51%, transparent 66% ), linear-gradient( 180deg, rgba(3,2,5,.015), rgba(3,2,5,.065) ), url( "/assets/images/special-forces-operation-map-v189.png" ) !important; background-repeat: no-repeat, no-repeat, no-repeat !important; background-position: center, center, center !important; background-size: 100% 100%, 100% 100%, 100% 100% !important; box-shadow: none !important; } /* ======================================================= MAP OVERLAYS ======================================================= */ .sf-operation-map::before{ content:""; position: absolute; inset: 0; z-index: 4; pointer-events: none; /* * 左側はタイトルの可読性を確保。 * 右側へ行くほどMAPをそのまま見せる。 */ background: linear-gradient( 90deg, rgba(7,4,9,.76) 0%, rgba(7,4,9,.40) 17%, rgba(7,4,9,.12) 33%, transparent 50% ) !important; } .sf-operation-map::after{ content:""; position: absolute; inset: 0; z-index: 5; pointer-events: none; background: linear-gradient( 180deg, rgba(255,255,255,.013), transparent 24%, rgba(0,0,0,.065) ) !important; box-shadow: inset 0 0 14px rgba(0,0,0,.13) !important; } /* ======================================================= OPERATION INFO MAPより上へオーバーレイ ======================================================= */ .sf-operation-info{ position: relative !important; z-index: 10 !important; /* * 完成イメージでは文字領域は * MAPの上にも少し重なる */ width: 60% !important; min-height: 158px !important; padding: 9px 11px 8px !important; border: 0 !important; background: transparent !important; } /* ======================================================= TITLE ======================================================= */ .sf-operation-info h3{ position: relative; z-index: 12; margin: 7px 0 2px !important; max-width: none !important; white-space: nowrap; font-size: clamp( 14px, 1vw, 17px ) !important; text-shadow: 0 2px 8px rgba(0,0,0,.72); } .sf-operation-jp{ position: relative; z-index: 12; font-size: 5px !important; text-shadow: 0 1px 5px #000; } /* ======================================================= PROGRESS ======================================================= */ .sf-mission-progress{ position: relative; z-index: 12; width: 72% !important; margin-top: auto !important; grid-template-columns: minmax(0,1fr) 62px !important; gap: 8px !important; } /* * 完成イメージではカードというより * MAP上のHUD表示なので背景を軽くする */ .sf-progress-main{ border: 0 !important; background: rgba(5,3,7,.29) !important; backdrop-filter: blur(1px); } .sf-progress-days{ background: rgba(5,3,7,.48) !important; border: 1px solid rgba(255,255,255,.045) !important; } /* ======================================================= LOWER CARDS ======================================================= */ .sf-operation-bottom{ height: 84px !important; margin-top: 6px !important; grid-template-columns: minmax(0,1.14fr) minmax(0,.86fr) !important; } .sf-mission-objective, .sf-special-reward{ height: 84px !important; min-height: 84px !important; } /* * SPECIAL REWARDを完成イメージの比率へ */ .sf-reward-thumb{ height: 49px !important; min-height: 49px !important; margin-top: 3px !important; } } /* ========================================================= YUKINON SPECIAL FORCES FINAL OPERATION POLISH V1.9.3 - desktop only - mission progress readability - remaining days emphasis - tactical monitor seamless finish ========================================================= */ @media (min-width:1181px){ /* ------------------------------------------------------- OPERATION MONITOR ------------------------------------------------------- */ .sf-operation-top{ isolation:isolate; } /* * マップ左端をタイトル領域へ自然に溶け込ませる。 * 既存の背景画像や位置は変更しない。 */ .sf-operation-map::before{ content:""; position:absolute; z-index:3; top:0; bottom:0; left:0; width:42%; pointer-events:none; background: linear-gradient( 90deg, rgba(8,4,9,.98) 0%, rgba(8,4,9,.88) 18%, rgba(8,4,9,.58) 44%, rgba(8,4,9,.18) 73%, rgba(8,4,9,0) 100% ); } /* * 全体をほんの少し暗くして、 * ピンクのHUD情報を前へ出す。 */ .sf-operation-map::after{ content:""; position:absolute; z-index:2; inset:0; pointer-events:none; background: linear-gradient( 180deg, rgba(4,2,6,.02), rgba(4,2,6,.12) ); } .sf-operation-info{ z-index:10; } .sf-operation-info h3{ position:relative; z-index:12; text-shadow: 0 1px 0 rgba(0,0,0,.92), 0 0 11px rgba(232,70,153,.16); } .sf-operation-jp{ position:relative; z-index:12; opacity:.82; } /* ------------------------------------------------------- MISSION PROGRESS ------------------------------------------------------- */ .sf-mission-progress{ position:relative; z-index:12; align-items:stretch; gap:7px; } .sf-progress-main{ padding: 6px 7px 5px; border: 1px solid rgba(233,67,151,.10) !important; background: linear-gradient( 180deg, rgba(15,6,12,.42), rgba(7,3,7,.30) ) !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.012); } .sf-progress-main > small{ display:block; margin-bottom:4px; color: rgba(224,167,196,.74); font-size: 6.5px; font-weight:700; letter-spacing:.075em; line-height:1; } .sf-progress-row{ display:flex; align-items:center; gap:6px; } .sf-progress-line{ position:relative; flex:1 1 auto; min-width:0; height:4px; overflow:hidden; border: 1px solid rgba(234,77,158,.28); background: rgba(29,9,20,.78); box-shadow: inset 0 0 4px rgba(0,0,0,.72); } .sf-progress-line > i{ position:absolute; top:0; bottom:0; left:0; border-radius:0; background: linear-gradient( 90deg, #d93586 0%, #ee4fa3 55%, #ff8bc5 100% ) !important; box-shadow: 0 0 4px rgba(235,66,155,.72), 0 0 8px rgba(240,71,164,.38) !important; transition: width .45s ease; } [data-mission-progress]{ flex:0 0 auto; min-width:30px; color:#ff83be; font-size:10px; font-weight:900; line-height:1; text-align:right; letter-spacing:.01em; font-variant-numeric: tabular-nums; text-shadow: 0 0 4px rgba(255,83,170,.58), 0 0 9px rgba(238,69,158,.28); } /* ------------------------------------------------------- REMAINING DAYS ------------------------------------------------------- */ .sf-progress-days{ display:flex; flex-direction:column; align-items:center; justify-content:center; min-width:51px; padding: 5px 5px 4px; border: 1px solid rgba(229,67,151,.12); background: linear-gradient( 180deg, rgba(14,5,11,.63), rgba(6,3,6,.48) ); box-shadow: inset 0 0 9px rgba(238,69,157,.025); } .sf-progress-days small{ margin:0 0 2px; color: rgba(224,161,195,.68); font-size:5px; font-weight:700; letter-spacing:.08em; line-height:1; } [data-mission-days]{ color:#fff; font-size:16px; font-weight:900; line-height:.95; font-variant-numeric: tabular-nums; text-shadow: 0 0 5px rgba(255,255,255,.16), 0 0 10px rgba(238,75,164,.22); } .sf-progress-days > span{ margin-top:3px; color: rgba(214,164,190,.62); font-size:5px; font-weight:700; letter-spacing:.12em; line-height:1; } /* ------------------------------------------------------- LOWER COMMAND PANELS ------------------------------------------------------- */ .sf-mission-objective, .sf-special-reward{ border-color: rgba(232,65,151,.13); background: linear-gradient( 180deg, rgba(17,6,13,.48), rgba(6,3,7,.54) ); } .sf-mission-objective small, .sf-special-reward small{ color: rgba(241,88,167,.86); } .sf-reward-head strong{ text-shadow: 0 0 8px rgba(237,75,159,.12); } } /* ========================================================= YUKINON SPECIAL FORCES ROSTER DATABASE UI V1.3 CSS VERSION 1.9.4 ========================================================= */ /* --------------------------------------------------------- ROSTER INTERACTION --------------------------------------------------------- */ .sf-roster-row[ data-force-member-id ]{ cursor:pointer; outline:none; } .sf-roster-row[ data-force-member-id ]:focus-visible{ position:relative; z-index:3; box-shadow: inset 0 0 0 1px rgba(255,91,177,.72), 0 0 15px rgba(232,61,151,.20); } /* --------------------------------------------------------- DATABASE MODAL --------------------------------------------------------- */ body.sf-db-lock{ overflow:hidden; } .sf-db-modal{ position:fixed; z-index:10000; inset:0; display:grid; place-items:center; padding:24px; opacity:0; pointer-events:none; transition: opacity .18s ease; } .sf-db-modal[hidden]{ display:none !important; } .sf-db-modal.is-open{ opacity:1; pointer-events:auto; } .sf-db-backdrop{ position:absolute; inset:0; background: radial-gradient( circle at center, rgba(72,17,47,.26), rgba(3,1,4,.90) 72% ); backdrop-filter: blur(8px); } .sf-db-card{ position:relative; z-index:2; width: min( 720px, calc(100vw - 48px) ); max-height: min( 760px, calc(100vh - 48px) ); overflow:auto; border: 1px solid rgba(238,70,160,.48); background: linear-gradient( 145deg, rgba(17,5,13,.985), rgba(7,3,7,.995) ); box-shadow: 0 34px 90px rgba(0,0,0,.70), 0 0 34px rgba(230,55,148,.18), inset 0 0 0 1px rgba(255,255,255,.018); transform: translateY(12px) scale(.985); transition: transform .18s ease; } .sf-db-modal.is-open .sf-db-card{ transform: translateY(0) scale(1); } .sf-db-card::before{ content:""; position:absolute; inset:0; pointer-events:none; background: linear-gradient( 90deg, rgba(236,61,154,.08) 1px, transparent 1px ), linear-gradient( rgba(236,61,154,.055) 1px, transparent 1px ); background-size: 34px 34px; mask-image: linear-gradient( 180deg, rgba(0,0,0,.55), transparent 68% ); } .sf-db-head{ position:relative; z-index:2; display:flex; align-items:flex-start; justify-content:space-between; gap:20px; padding: 20px 22px 17px; border-bottom: 1px solid rgba(238,70,160,.25); } .sf-db-head small{ display:block; margin-bottom:5px; color:#e04a99; font-size:9px; font-weight:800; letter-spacing:.18em; } .sf-db-head h2{ margin:0; color:#fff7fb; font-size: clamp( 20px, 3vw, 30px ); line-height:1; letter-spacing:.045em; text-shadow: 0 0 15px rgba(238,64,157,.18); } .sf-db-head span{ display:block; margin-top:6px; color: rgba(218,177,199,.68); font-size:9px; letter-spacing:.14em; } .sf-db-close{ flex:0 0 auto; width:36px; height:36px; border: 1px solid rgba(238,70,160,.32); background: rgba(238,70,160,.07); color:#ff78ba; font: 700 24px/1 sans-serif; cursor:pointer; } .sf-db-close:hover, .sf-db-close:focus-visible{ border-color: rgba(255,105,183,.80); background: rgba(238,70,160,.16); outline:none; } .sf-db-profile{ position:relative; z-index:2; display:grid; grid-template-columns: 92px minmax(0,1fr); gap:18px; align-items:center; padding: 22px; } .sf-db-avatar{ display:grid; place-items:center; width:92px; height:92px; overflow:hidden; border: 1px solid rgba(242,80,166,.45); background: radial-gradient( circle at 50% 35%, rgba(235,70,159,.30), rgba(12,4,10,.96) 72% ); color:#fff; font-size:30px; font-weight:900; box-shadow: 0 0 22px rgba(236,60,154,.17); } .sf-db-avatar img{ display:block; width:100%; height:100%; object-fit:cover; } .sf-db-identity small{ display:block; color: rgba(217,164,194,.64); font-size:8px; font-weight:700; letter-spacing:.19em; } .sf-db-identity h3{ margin: 5px 0 8px; color:#fff; font-size: clamp( 23px, 4vw, 36px ); line-height:1.05; overflow-wrap:anywhere; } .sf-db-identity > strong{ display:inline-flex; padding: 6px 10px; border: 1px solid rgba(241,75,163,.36); background: rgba(236,63,155,.08); color:#ff79bb; font-size:10px; letter-spacing:.12em; } /* Tier identity */ .sf-db-modal[ data-tier="100k" ] .sf-db-identity > strong{ color:#e9e8ee; border-color: rgba(214,216,227,.38); } .sf-db-modal[ data-tier="200k" ] .sf-db-identity > strong{ color:#f2c86e; border-color: rgba(226,177,72,.45); } .sf-db-modal[ data-tier="300k" ] .sf-db-identity > strong{ color:#ff73bd; border-color: rgba(245,70,169,.56); box-shadow: 0 0 12px rgba(238,67,159,.14); } .sf-db-grid{ position:relative; z-index:2; display:grid; grid-template-columns: repeat( 2, minmax(0,1fr) ); gap:8px; padding: 0 22px 22px; } .sf-db-grid article{ min-width:0; padding: 13px 14px; border: 1px solid rgba(235,66,157,.15); background: linear-gradient( 135deg, rgba(239,66,158,.055), rgba(255,255,255,.012) ); } .sf-db-grid small{ display:block; margin-bottom:6px; color: rgba(211,157,187,.64); font-size:7px; font-weight:700; letter-spacing:.15em; } .sf-db-grid strong{ display:block; color: rgba(255,246,251,.94); font-size:12px; line-height:1.35; overflow-wrap:anywhere; font-variant-numeric: tabular-nums; } .sf-db-grid .sf-db-active{ color:#ff69b1; } .sf-db-grid .sf-db-active::before{ content:""; display:inline-block; width:6px; height:6px; margin-right:7px; border-radius:50%; background:#ff5eae; box-shadow: 0 0 9px rgba(255,71,167,.72); vertical-align:1px; } .sf-db-foot{ position:relative; z-index:2; display:flex; align-items:center; justify-content:space-between; gap:14px; padding: 14px 22px; border-top: 1px solid rgba(237,65,157,.19); background: rgba(5,2,5,.46); } .sf-db-foot span{ color: rgba(206,152,182,.50); font-size:7px; letter-spacing:.15em; } .sf-db-foot button{ padding: 9px 14px; border: 1px solid rgba(240,72,164,.36); background: rgba(239,67,158,.08); color:#ff79bb; font-size:8px; font-weight:800; letter-spacing:.11em; cursor:pointer; } .sf-db-foot button:hover, .sf-db-foot button:focus-visible{ background: rgba(239,67,158,.17); outline:none; } /* --------------------------------------------------------- MOBILE BOTTOM SHEET --------------------------------------------------------- */ @media(max-width:700px){ .sf-db-modal{ place-items:end center; padding: 12px 8px calc( 8px + env( safe-area-inset-bottom ) ); } .sf-db-card{ width:100%; max-height: min( 82vh, 760px ); transform: translateY(34px); border-radius: 16px 16px 0 0; } .sf-db-modal.is-open .sf-db-card{ transform: translateY(0); } .sf-db-head{ padding: 17px 16px 14px; } .sf-db-head h2{ font-size:20px; } .sf-db-profile{ grid-template-columns: 72px minmax(0,1fr); gap:13px; padding: 17px 16px; } .sf-db-avatar{ width:72px; height:72px; font-size:24px; } .sf-db-identity h3{ font-size:22px; } .sf-db-grid{ grid-template-columns: minmax(0,1fr); padding: 0 16px 16px; } .sf-db-foot{ padding: 13px 16px; } .sf-db-foot span{ display:none; } .sf-db-foot button{ width:100%; } } /* ========================================================= SPECIAL FORCES DATABASE LARGE VISUAL V2.0 STREAM HERO SIZE REFERENCE ========================================================= */ .sf-db-card{ width: min( 920px, calc( 100vw - 48px ) ); max-height: calc( 100svh - 32px ); overflow:auto; } .sf-db-profile{ display:block; padding:0; } .sf-db-avatar{ width:100%; height:520px; overflow:hidden; border-left:0; border-right:0; border-bottom: 1px solid rgba( 242, 80, 166, .32 ); font-size:72px; } .sf-db-avatar img{ display:block; width:100%; height:100%; object-fit:cover; object-position: center 42%; } .sf-db-identity{ padding: 22px 24px 24px; } @media(max-width:700px){ .sf-db-card{ width: calc( 100vw - 24px ); max-height: calc( 100svh - 24px ); } .sf-db-avatar{ width:100%; height:390px; font-size:54px; } .sf-db-avatar img{ object-position: center 38%; } .sf-db-identity{ padding: 18px 16px 20px; } } /* ========================================================= SPECIAL FORCES DATABASE ADAPTIVE VISUAL V2.1 Keeps: Desktop = 520px Mobile = 390px Background: cover + blur Foreground: contain = full original image ========================================================= */ .sf-db-avatar{ position:relative; isolation:isolate; background: radial-gradient( circle at 50% 45%, #26101e 0%, #090308 72% ); } .sf-db-avatar.has-adaptive-image{ display:grid; place-items:center; } /* --------------------------------------------------------- BLURRED BACKGROUND --------------------------------------------------------- */ .sf-db-avatar .sf-db-avatar-bg{ position:absolute !important; z-index:0; inset:-10% !important; width:120% !important; height:120% !important; object-fit:cover !important; object-position: center center !important; filter: blur(28px) brightness(.46) saturate(1.28); transform: scale(1.06); opacity:.88; pointer-events:none; } /* --------------------------------------------------------- FULL ORIGINAL IMAGE --------------------------------------------------------- */ .sf-db-avatar .sf-db-avatar-main{ position:relative !important; z-index:2; width:100% !important; height:100% !important; object-fit:contain !important; object-position: center center !important; background: transparent; filter: drop-shadow( 0 16px 30px rgba(0,0,0,.30) ); } /* --------------------------------------------------------- DATABASE VISUAL OVERLAY --------------------------------------------------------- */ .sf-db-avatar.has-adaptive-image::after{ content:""; position:absolute; z-index:1; inset:0; pointer-events:none; background: linear-gradient( 180deg, rgba(255,255,255,.025), transparent 24%, transparent 70%, rgba(7,2,6,.22) ); box-shadow: inset 0 0 60px rgba(0,0,0,.20); } /* --------------------------------------------------------- DESKTOP --------------------------------------------------------- */ @media(min-width:701px){ .sf-db-avatar{ height:520px; } } /* --------------------------------------------------------- MOBILE Same height reference as STREAM mobile --------------------------------------------------------- */ @media(max-width:700px){ .sf-db-avatar{ height:390px; } .sf-db-avatar .sf-db-avatar-bg{ filter: blur(22px) brightness(.48) saturate(1.24); } } /* ========================================================= SPECIAL FORCES DATABASE FULL IMAGE V2.2 IMPORTANT: Never crop profile images. Always show the entire original image. ========================================================= */ .sf-db-avatar{ position:relative !important; display:grid !important; place-items:center !important; width:100% !important; height:520px !important; padding:0 !important; overflow:hidden !important; background: radial-gradient( circle at 50% 45%, #28101f 0%, #11070e 48%, #050204 100% ) !important; } /* --------------------------------------------------------- Disable the previous blurred background layer. The user wants the original full image itself. --------------------------------------------------------- */ .sf-db-avatar .sf-db-avatar-bg{ display:none !important; } /* --------------------------------------------------------- ORIGINAL IMAGE contain = absolutely no cropping --------------------------------------------------------- */ .sf-db-avatar > img:not(.sf-db-avatar-bg), .sf-db-avatar .sf-db-avatar-main{ position:relative !important; z-index:2 !important; inset:auto !important; display:block !important; width:100% !important; height:100% !important; max-width:100% !important; max-height:100% !important; object-fit:contain !important; object-position: center center !important; transform:none !important; filter:none !important; opacity:1 !important; background: transparent !important; } /* --------------------------------------------------------- Remove overlays that could obscure the image. --------------------------------------------------------- */ .sf-db-avatar.has-adaptive-image::after{ display:none !important; } /* --------------------------------------------------------- MOBILE --------------------------------------------------------- */ @media(max-width:700px){ .sf-db-avatar{ height:390px !important; } } /* ========================================================= SPECIAL FORCES DATABASE FULL IMAGE V2.2.1 ALL DEVICES / NO CROPPING PC / TABLET / MOBILE: Always show the entire original image. ========================================================= */ /* --------------------------------------------------------- ALL DEVICES --------------------------------------------------------- */ html body .sf-db-modal .sf-db-card .sf-db-profile .sf-db-avatar{ position:relative !important; display:grid !important; place-items:center !important; width:100% !important; padding:0 !important; overflow:hidden !important; background: radial-gradient( circle at center, #25101d 0%, #10060d 58%, #050204 100% ) !important; } /* --------------------------------------------------------- DESKTOP --------------------------------------------------------- */ @media (min-width:701px){ html body .sf-db-modal .sf-db-card .sf-db-profile .sf-db-avatar{ width:100% !important; height:520px !important; min-height:520px !important; max-height:520px !important; } } /* --------------------------------------------------------- TABLET / MOBILE --------------------------------------------------------- */ @media (max-width:700px){ html body .sf-db-modal .sf-db-card .sf-db-profile .sf-db-avatar{ width:100% !important; height:390px !important; min-height:390px !important; max-height:390px !important; } } /* --------------------------------------------------------- NEVER USE THE BLURRED/COVER BACKGROUND --------------------------------------------------------- */ html body .sf-db-modal .sf-db-avatar .sf-db-avatar-bg{ display:none !important; } /* --------------------------------------------------------- ORIGINAL IMAGE PC / TABLET / MOBILE --------------------------------------------------------- */ html body .sf-db-modal .sf-db-avatar > img:not(.sf-db-avatar-bg), html body .sf-db-modal .sf-db-avatar img.sf-db-avatar-main{ position:relative !important; z-index:5 !important; inset:auto !important; display:block !important; width:100% !important; height:100% !important; min-width:0 !important; min-height:0 !important; max-width:100% !important; max-height:100% !important; margin:0 auto !important; padding:0 !important; /* * CRITICAL: * Never crop. */ object-fit:contain !important; object-position: center center !important; transform:none !important; scale:1 !important; filter:none !important; opacity:1 !important; clip-path:none !important; border-radius:0 !important; background: transparent !important; } /* --------------------------------------------------------- Disable decorative layer covering the image --------------------------------------------------------- */ html body .sf-db-modal .sf-db-avatar.has-adaptive-image::after{ display:none !important; content:none !important; } /* ========================================================= YUKINON SPECIAL FORCES ROSTER SCROLL FIX V2.2.2 ELITE SUPPORTER ROSTER: - panel title stays fixed - filter tabs stay fixed - column header stays fixed - OPERATOR list only becomes scrollable Desktop mouse wheel / trackpad: supported iPhone / Android touch: supported ========================================================= */ /* * Make the existing fixed-height roster panel * a vertical flex container. * * min-height:0 is important when this panel itself * is a CSS Grid child. */ .sf-roster-panel{ display:flex !important; flex-direction:column !important; min-height:0 !important; overflow:hidden !important; } /* * Header/filter/table header must never be * consumed by the scroll area. */ .sf-roster-panel > :not(.sf-roster), .sf-roster-filters, .sf-roster-head{ flex-grow:0 !important; flex-shrink:0 !important; } /* * Only actual OPERATOR records scroll. */ .sf-roster-panel > .sf-roster, .sf-roster[data-force-roster]{ flex:1 1 0 !important; min-height:0 !important; height:auto !important; max-height:none !important; overflow-x:hidden !important; overflow-y:auto !important; overscroll-behavior-y: contain; -webkit-overflow-scrolling: touch; touch-action: pan-y; scrollbar-gutter: stable; scrollbar-width: thin; scrollbar-color: rgba(240,81,162,.72) rgba(255,255,255,.025); } /* * Chrome / Edge / Safari scrollbar */ .sf-roster[data-force-roster]::-webkit-scrollbar{ width:7px; } .sf-roster[data-force-roster]::-webkit-scrollbar-track{ background: rgba(255,255,255,.025); border-left: 1px solid rgba(255,255,255,.035); } .sf-roster[data-force-roster]::-webkit-scrollbar-thumb{ border: 1px solid rgba(255,104,185,.48); border-radius: 999px; background: linear-gradient( 180deg, rgba(255,91,171,.86), rgba(126,34,97,.72) ); box-shadow: 0 0 9px rgba(240,65,157,.30); } .sf-roster[data-force-roster]::-webkit-scrollbar-thumb:hover{ background: linear-gradient( 180deg, rgba(255,123,198,.96), rgba(170,48,132,.84) ); } /* * Do not shrink OPERATOR rows just because * more members are present. */ .sf-roster[data-force-roster] > .sf-roster-row{ flex-shrink:0 !important; } /* * Ensure the fixed UI stays visually above * the moving roster rows. */ .sf-roster-filters, .sf-roster-head{ position:relative; z-index:5; } /* * Touch devices. */ @media (hover:none) and (pointer:coarse){ .sf-roster[data-force-roster]{ -webkit-overflow-scrolling: touch; touch-action: pan-y; } } /* ========================================================= YUKINON SPECIAL FORCES MOBILE ROSTER FLOW FIX V2.2.3 SAFE V2 Desktop: Keep V2.2.2 internal roster scrolling. Smartphone: Show every operator in normal document flow. ========================================================= */ @media (max-width:700px){ /* * Mobile roster panel grows with member rows. */ .sf-roster-panel{ height:auto !important; min-height:0 !important; max-height:none !important; overflow:visible !important; } /* * Critical: * cancel desktop flex-basis:0 scroll-area behaviour. */ .sf-roster-panel > .sf-roster, .sf-roster[data-force-roster]{ flex: 0 0 auto !important; display:block !important; width:100% !important; max-width:100% !important; min-width:0 !important; height:auto !important; min-height:0 !important; max-height:none !important; overflow-x:hidden !important; overflow-y:visible !important; overscroll-behavior:auto !important; scrollbar-gutter:auto !important; touch-action:auto !important; } /* * Generated members remain visible and cannot collapse. */ .sf-roster[data-force-roster] > .sf-roster-row{ display:grid !important; flex: 0 0 auto !important; width:100% !important; max-width:100% !important; min-width:0 !important; height:auto !important; visibility:visible !important; opacity:1 !important; } /* * Header / filters stay in normal mobile flow. */ .sf-roster-filters, .sf-roster-head{ position:relative !important; top:auto !important; right:auto !important; bottom:auto !important; left:auto !important; } /* * Internal scrollbar is unnecessary on mobile. */ .sf-roster[data-force-roster]::-webkit-scrollbar{ width:0 !important; height:0 !important; } } /* ========================================================= YUKINON SPECIAL FORCES RESPONSIVE ROSTER FLOW FIX V2.2.4 <= 1180px Smartphone portrait Smartphone landscape Tablet portrait Tablet landscape ROSTER grows naturally with all members. >= 1181px Existing V2.2.2 internal scroll remains unchanged. ========================================================= */ @media (max-width:1180px){ /* * The responsive SPECIAL FORCES layout no longer has * a reliable fixed roster-panel height. * * Therefore the roster panel itself must grow naturally. */ .sf-roster-panel{ display:flex !important; flex-direction: column !important; height: auto !important; min-height: 0 !important; max-height: none !important; overflow: visible !important; } /* * CRITICAL: * * Desktop V2.2.2 uses: * * flex:1 1 0 * min-height:0 * overflow-y:auto * * This works only while the parent has a fixed height. * * Responsive layouts use auto height, so flex-basis:0 * collapses the member area. */ .sf-roster-panel > .sf-roster, .sf-roster[ data-force-roster ]{ display: block !important; flex: 0 0 auto !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important; overflow-x: hidden !important; overflow-y: visible !important; overscroll-behavior: auto !important; -webkit-overflow-scrolling: auto !important; touch-action: auto !important; scrollbar-gutter: auto !important; } /* * Every generated SPECIAL FORCE member must remain * part of the normal document flow. */ .sf-roster[ data-force-roster ] > .sf-roster-row{ display: grid !important; flex: 0 0 auto !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; height: auto !important; min-height: 64px !important; max-height: none !important; visibility: visible !important; opacity: 1 !important; overflow: visible !important; } /* * Header / filters / column header stay in document flow. */ .sf-roster-filters, .sf-roster-head{ position: relative !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; flex: 0 0 auto !important; } /* * No internal scrollbar below desktop breakpoint. */ .sf-roster[ data-force-roster ]::-webkit-scrollbar{ width: 0 !important; height: 0 !important; } } /* ========================================================= YUKINON SPECIAL FORCES DOG TAG IMAGE FIT FIX V2.2.5 ========================================================= */ .sf-dogtag-panel{ overflow:hidden; } .sf-dogtag-panel > *{ min-width:0; } .sf-dogtag-panel img{ max-width:100%; } /* --------------------------------------------------------- DOG TAG visual area 右下パネル内の画像が切れないように中央配置で収める --------------------------------------------------------- */ .sf-dogtag-panel .sf-dogtag-card, .sf-dogtag-panel .sf-dogtag-media, .sf-dogtag-panel .sf-dogtag-visual, .sf-dogtag-panel .sf-dogtag-image, .sf-dogtag-panel [data-force-dogtag], .sf-dogtag-panel [data-sf-dogtag], .sf-dogtag-panel [data-sf-db-dogtag]{ width:100%; min-width:0; min-height:0; box-sizing:border-box; } .sf-dogtag-panel .sf-dogtag-card, .sf-dogtag-panel .sf-dogtag-media, .sf-dogtag-panel .sf-dogtag-visual, .sf-dogtag-panel .sf-dogtag-image, .sf-dogtag-panel [data-force-dogtag], .sf-dogtag-panel [data-sf-dogtag], .sf-dogtag-panel [data-sf-db-dogtag]{ display:flex; align-items:center; justify-content:center; overflow:hidden; } /* 画像要素として置かれている場合 */ .sf-dogtag-panel .sf-dogtag-card img, .sf-dogtag-panel .sf-dogtag-media img, .sf-dogtag-panel .sf-dogtag-visual img, .sf-dogtag-panel .sf-dogtag-image img, .sf-dogtag-panel [data-force-dogtag] img, .sf-dogtag-panel [data-sf-dogtag] img, .sf-dogtag-panel [data-sf-db-dogtag] img, .sf-dogtag-panel img{ display:block; width:100%; height:100%; object-fit:contain !important; object-position:center center !important; } /* 背景画像として描画されている場合も保険で調整 */ .sf-dogtag-panel .sf-dogtag-card, .sf-dogtag-panel .sf-dogtag-media, .sf-dogtag-panel .sf-dogtag-visual, .sf-dogtag-panel .sf-dogtag-image, .sf-dogtag-panel [data-force-dogtag], .sf-dogtag-panel [data-sf-dogtag], .sf-dogtag-panel [data-sf-db-dogtag]{ background-size:contain !important; background-position:center center !important; background-repeat:no-repeat !important; } /* デスクトップで少し余白を取り、切れを防ぐ */ .sf-dogtag-panel{ padding-bottom:0 !important; } .sf-dogtag-panel .sf-dogtag-card, .sf-dogtag-panel .sf-dogtag-media, .sf-dogtag-panel .sf-dogtag-visual, .sf-dogtag-panel .sf-dogtag-image, .sf-dogtag-panel [data-force-dogtag], .sf-dogtag-panel [data-sf-dogtag], .sf-dogtag-panel [data-sf-db-dogtag]{ padding:10px; } /* 横画面やや狭めでも切れにくくする */ @media (max-width:1180px){ .sf-dogtag-panel .sf-dogtag-card, .sf-dogtag-panel .sf-dogtag-media, .sf-dogtag-panel .sf-dogtag-visual, .sf-dogtag-panel .sf-dogtag-image, .sf-dogtag-panel [data-force-dogtag], .sf-dogtag-panel [data-sf-dogtag], .sf-dogtag-panel [data-sf-db-dogtag]{ padding:8px; } } /* iPhone横などでも見切れにくくする */ @media (max-width:900px){ .sf-dogtag-panel .sf-dogtag-card, .sf-dogtag-panel .sf-dogtag-media, .sf-dogtag-panel .sf-dogtag-visual, .sf-dogtag-panel .sf-dogtag-image, .sf-dogtag-panel [data-force-dogtag], .sf-dogtag-panel [data-sf-dogtag], .sf-dogtag-panel [data-sf-db-dogtag]{ padding:6px; } } /* ========================================================= SPECIAL DOG TAG ART FINAL FIT V2.2.6 Dedicated fix for: .sf-dogtag-art The artwork is rendered as a CSS background image. Goals: - never crop artwork - preserve image aspect ratio - give artwork a small safe area - keep existing panel/grid sizes untouched ========================================================= */ .sf-dogtag-panel .sf-dogtag-art{ /* * Keep the art element inside its panel. */ box-sizing: border-box !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; /* * Critical: * never use cover for the DOG TAG artwork. */ background-size: contain !important; background-position: center center !important; background-repeat: no-repeat !important; /* * Give the complete image a small visual safe area. * * background-origin makes "contain" calculate inside * the padded content area while keeping the source * image aspect ratio intact. */ padding: clamp( 8px, .7vw, 14px ) !important; background-origin: content-box !important; } /* ========================================================= TABLET / COMPACT DESKTOP ========================================================= */ @media (max-width:1400px){ .sf-dogtag-panel .sf-dogtag-art{ padding: 10px !important; background-size: contain !important; background-position: center center !important; } } /* ========================================================= TABLET / PHONE LANDSCAPE ========================================================= */ @media (max-width:1180px){ .sf-dogtag-panel .sf-dogtag-art{ padding: 8px !important; background-size: contain !important; background-position: center center !important; background-repeat: no-repeat !important; } } /* ========================================================= PHONE ========================================================= */ @media (max-width:760px){ .sf-dogtag-panel .sf-dogtag-art{ padding: 6px !important; background-size: contain !important; background-position: center center !important; } } /* ========================================================= YUKINON SPECIAL FORCES SPECIAL DOG TAG FINAL ASSET V2.2.7 ========================================================= */ /* * Final dedicated DOG TAG artwork. * * The new artwork already contains its own safe margins, * therefore no artificial padding is added here. */ .sf-dogtag-panel .sf-dogtag-art{ width: 100% !important; height: 100% !important; min-width: 0 !important; min-height: 0 !important; padding: 0 !important; margin: 0 !important; box-sizing: border-box !important; background-image: url("/assets/images/special-forces-dogtag-v12-final.png") !important; background-size: cover !important; background-position: center center !important; background-repeat: no-repeat !important; background-origin: border-box !important; background-clip: border-box !important; } /* * Keep the panel itself unchanged. */ .sf-dogtag-panel{ overflow: hidden !important; } /* ========================================================= RESPONSIVE ========================================================= */ @media (max-width:1400px){ .sf-dogtag-panel .sf-dogtag-art{ padding: 0 !important; background-size: cover !important; background-position: center center !important; } } @media (max-width:1180px){ .sf-dogtag-panel .sf-dogtag-art{ background-size: cover !important; background-position: center center !important; } } @media (max-width:760px){ .sf-dogtag-panel .sf-dogtag-art{ background-size: cover !important; background-position: center center !important; } } /* ========================================================= YUKINON SPECIAL FORCES MOBILE PORTRAIT DOG TAG ASPECT FIX V2.2.8 SAFE V2 iPhone portrait only. The final artwork is 4:3. Give the empty background-image element a definite rendered height from its width so it cannot collapse. ========================================================= */ @media (max-width:520px) and (orientation:portrait) { .sf-dogtag-panel{ display: block !important; width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important; overflow: visible !important; } .sf-dogtag-panel .sf-dogtag-art{ display: block !important; position: relative !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; max-height: none !important; aspect-ratio: 4 / 3 !important; flex: none !important; align-self: auto !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; background-image: url("/assets/images/special-forces-dogtag-v12-final.png") !important; background-size: cover !important; background-position: center center !important; background-repeat: no-repeat !important; background-origin: border-box !important; background-clip: border-box !important; overflow: hidden !important; } } @media (max-width: 760px) { .sf-roster-filters { flex-wrap: wrap; } .sf-roster-filters button { min-height: 44px !important; font-size: 12px !important; white-space: normal; overflow-wrap: anywhere; } .sf-operator { min-width: 0; } .sf-operator strong { font-size: 14px !important; white-space: normal !important; overflow-wrap: anywhere; line-height: 1.6; } .sf-class-badge, .sf-threshold, .sf-certified, .sf-status { font-size: 11px !important; } .sf-db-card { max-width: calc(100vw - 24px); } .sf-db-profile h3 { overflow-wrap: anywhere; } .sf-db-close { min-width: 44px; min-height: 44px; } }