Template:JourneyPage/styles.css - Revision history

Operator at 21:34, 2 June 2025

2025-06-02T21:34:57Z

← Older revision		Revision as of 17:34, 2 June 2025
Line 730:		Line 730:
	justify-content:center;		justify-content:center;
	width:100%;height:100%;		width:100%;height:100%;
	padding-top:~~18px~~ !important;		padding-top:16px !important;
	padding-bottom:~~18px~~ !important;/* ← taller + wider than the 8 × 14 we tried */		padding-bottom:16px !important;/* ← taller + wider than the 8 × 14 we tried */
	font-size:14px; /* keep label readable on desktop */		font-size:14px; /* keep label readable on desktop */
	line-height:1;		line-height:1;

Operator at 21:30, 2 June 2025

2025-06-02T21:30:10Z

← Older revision		Revision as of 17:30, 2 June 2025
Line 730:		Line 730:
	justify-content:center;		justify-content:center;
	width:100%;height:100%;		width:100%;height:100%;
	padding-top:18px;		padding-top:18px !important;
	padding-bottom:18px;/* ← taller + wider than the 8 × 14 we tried */		padding-bottom:18px !important;/* ← taller + wider than the 8 × 14 we tried */
	font-size:14px; /* keep label readable on desktop */		font-size:14px; /* keep label readable on desktop */
	line-height:1;		line-height:1;

Operator at 21:28, 2 June 2025

2025-06-02T21:28:41Z

← Older revision		Revision as of 17:28, 2 June 2025
Line 691:		Line 691:
	/* Outer clickable box */		/* Outer clickable box */
	.action-button{		.action-button{
			display:flex;
			align-items:center; /* vertical-centre children */
			justify-content:center; /* horizontal-centre */
	flex:0 0 auto; /* natural width, no 50 % split */		flex:0 0 auto; /* natural width, no 50 % split */
	min-width:180px; /* identical size */		min-width:180px; /* identical size */

Operator at 21:26, 2 June 2025

2025-06-02T21:26:43Z

← Older revision		Revision as of 17:26, 2 June 2025
Line 727:		Line 727:
	justify-content:center;		justify-content:center;
	width:100%;height:100%;		width:100%;height:100%;
	padding:~~180px~~ 18px; /* ← taller + wider than the 8 × 14 we tried */		padding-top:18px;
			padding-bottom:18px;/* ← taller + wider than the 8 × 14 we tried */
	font-size:14px; /* keep label readable on desktop */		font-size:14px; /* keep label readable on desktop */
	line-height:1;		line-height:1;

Operator at 21:24, 2 June 2025

2025-06-02T21:24:56Z

← Older revision		Revision as of 17:24, 2 June 2025
Line 727:		Line 727:
	justify-content:center;		justify-content:center;
	width:100%;height:100%;		width:100%;height:100%;
	padding:~~18px~~ 18px; /* ← taller + wider than the 8 × 14 we tried */		padding:180px 18px; /* ← taller + wider than the 8 × 14 we tried */
	font-size:14px; /* keep label readable on desktop */		font-size:14px; /* keep label readable on desktop */
	line-height:1;		line-height:1;

Operator at 21:24, 2 June 2025

2025-06-02T21:24:03Z

← Older revision		Revision as of 17:24, 2 June 2025
Line 727:		Line 727:
	justify-content:center;		justify-content:center;
	width:100%;height:100%;		width:100%;height:100%;
	padding:~~12px~~ 18px; /* ← taller + wider than the 8 × 14 we tried */		padding:18px 18px; /* ← taller + wider than the 8 × 14 we tried */
	font-size:14px; /* keep label readable on desktop */		font-size:14px; /* keep label readable on desktop */
	line-height:1;		line-height:1;

Operator at 21:21, 2 June 2025

2025-06-02T21:21:02Z

← Older revision		Revision as of 17:21, 2 June 2025
Line 692:		Line 692:
	.action-button{		.action-button{
	flex:0 0 auto; /* natural width, no 50 % split */		flex:0 0 auto; /* natural width, no 50 % split */
	min-width:~~160px~~; /* identical size */		min-width:180px; /* identical size */
	background:linear-gradient(135deg,rgba(0,0,2,.8) 0%,rgba(12,10,20,.8) 100%);		background:linear-gradient(135deg,rgba(0,0,2,.8) 0%,rgba(12,10,20,.8) 100%);
	border:2px solid rgba(252,231,200,.2);		border:2px solid rgba(252,231,200,.2);
Line 727:		Line 727:
	justify-content:center;		justify-content:center;
	width:100%;height:100%;		width:100%;height:100%;
	padding:~~8px~~ 14px ~~6px~~; /* ~~top 8px, bottom 6px (~15 % less)~~ */		padding:12px 18px; /* ← taller + wider than the 8 × 14 we tried */
			font-size:14px; /* keep label readable on desktop */
	line-height:1;		line-height:1;
	color:inherit;		color:inherit;

Operator at 21:18, 2 June 2025

2025-06-02T21:18:24Z

← Older revision		Revision as of 17:18, 2 June 2025
Line 680:		Line 680:
	}		}

	/* ~~Action Buttons~~ */		/* ═══ Journey action buttons – consolidated ════════════════════ */
	.journey-actions {		.journey-actions{
	display: flex;		display:flex;
	~~gap~~: ~~10px~~;		justify-content:center; /* keep pair centred */
	~~flex-shrink~~: 0;		gap:1.2rem; /* breathing-room between them */
	margin-top: 5px;		margin-top:5px;
	}		flex-shrink:0;

	~~.action-button {~~
	flex~~: 1;~~
	~~padding~~-~~top: 18px !important;~~
	~~background: linear-gradient(135deg, rgba(0,0,2,.8) 0%, rgba(12,10,20,.8) 100%);~~
	~~border: 2px solid rgba(252, 231, 200, 0.2);~~
	~~color: #fce7c8;~~
	~~font-family: 'Rajdhani', sans-serif;~~
	~~font-size: 13px;~~
	~~font-weight: 600;~~
	~~text-transform~~: ~~uppercase;~~
	~~letter-spacing: 1px;~~
	~~cursor: pointer;~~
	~~transition: all~~ 0~~.3s ease;~~
	~~display: flex;~~
	~~align-items: center;~~
	~~justify-content: center;~~
	~~gap: 8px;~~
	~~position: relative;~~
	~~overflow: hidden~~;
	}		}

	.action-button:~~disabled {~~		/* Outer clickable box */
	~~opacity~~: 0.5;		.action-button{
	cursor: ~~not-allowed~~;		flex:0 0 auto; /* natural width, no 50 % split */
			min-width:160px; /* identical size */
			background:linear-gradient(135deg,rgba(0,0,2,.8) 0%,rgba(12,10,20,.8) 100%);
			border:2px solid rgba(252,231,200,.2);
			color:#fce7c8;
			font-family:'Rajdhani',sans-serif;
			font-size:14px; /* slightly larger text */
			font-weight:600;
			text-transform:uppercase;
			letter-spacing:1px;
			cursor:pointer;
			position:relative;
			overflow:hidden;
			transition:all .3s ease;
			padding:0 !important; /* we move padding to <a> */
	}		}

	.action-button::before {		/* Decorative shine on hover */
	content: '';		.action-button::before{
	position: absolute;		content:'';
	top: 0;		position:absolute;top:0;left:-100%;width:100%;height:100%;
	left: -100%;		background:linear-gradient(90deg,transparent 0%,rgba(252,231,200,.2) 50%,transparent 100%);
	width: 100%;		transition:left .3s ease;
	height: 100%;
	background: linear-gradient(90deg, transparent 0%, rgba(252, 231, 200, 0.2) 50%, transparent 100%);
	transition: left 0.3s ease;
	}		}
			.action-button:hover{border-color:#fce7c8;}
			.action-button:hover::before{left:100%;}

	.action-button~~:not(~~:disabled~~):hover~~ {		/* Disable state */
	~~border-color~~: ~~#fce7c8~~;		.action-button:disabled{opacity:.5;cursor:not-allowed;}
	~~box~~-~~shadow:~~
	~~0 0 20px rgba(252, 231, 200, 0.2),~~
	~~inset 0 0 20px rgba(252, 231, 200, 0.05)~~;
	}

	.action-button:~~not(~~:~~disabled)~~:~~hover~~::~~before {~~		/* Inner link – provides real padding + centring */
	~~left~~: ~~100~~%;		.action-button > a{
			display:flex;
			align-items:center;
			justify-content:center;
			width:100%;height:100%;
			padding:8px 14px 6px; /* top 8px, bottom 6px (~15 % less) */
			line-height:1;
			color:inherit;
			text-decoration:none;
	}		}

	.button-icon {		/* Optional icon (if you ever re-enable an svg / emoji) */
	font-size: ~~16px~~;		.button-icon{
			font-size:18px;
			margin-right:.25rem; /* subtle gap before text */
			line-height:1;
	}		}


	~~/* Center the text vertically when there’s no icon */~~
	~~.journey-actions .action-button > a{~~
	~~display:flex; /* let the text fill the button */~~
	~~align-items:center; /* vertical-centre */~~
	~~justify-content:center; /* horizontal-centre */~~
	~~padding:6px 14px 6px; /* ↑ 2 px extra on top only */~~
	~~width:100%; /* makes the <a> fill the button */~~
	~~height:92%;~~
	}


Line 1,478:		Line 1,468:
	}		}

	~~.journey-actions .action-button {~~
	~~display: inline-flex; /* keep icon + label together */~~
	~~align-items: center;~~
	}

	/* ░░░ J O U R N E Y – F I N E - T U N I N G ░░░ */		/* ░░░ J O U R N E Y – F I N E - T U N I N G ░░░ */
Line 1,510:		Line 1,496:
	gap: 1.2rem; /* a bit more spacing */		gap: 1.2rem; /* a bit more spacing */
	}		}
	~~.journey-actions .action-button {~~
	~~flex: 0 0 auto; /* natural width instead of 50 % */~~
	~~min-width: 160px; /* gives them identical size */~~
	}

	/* (optional) make the icons breathe */		/* (optional) make the icons breathe */

Operator at 21:12, 2 June 2025

2025-06-02T21:12:44Z

← Older revision		Revision as of 17:12, 2 June 2025
Line 748:		Line 748:
	padding:6px 14px 6px; /* ↑ 2 px extra on top only */		padding:6px 14px 6px; /* ↑ 2 px extra on top only */
	width:100%; /* makes the <a> fill the button */		width:100%; /* makes the <a> fill the button */
	height:~~100~~%;		height:92%;
	}		}

Operator at 21:03, 2 June 2025

2025-06-02T21:03:44Z

← Older revision		Revision as of 17:03, 2 June 2025
Line 746:		Line 746:
	align-items:center; /* vertical-centre */		align-items:center; /* vertical-centre */
	justify-content:center; /* horizontal-centre */		justify-content:center; /* horizontal-centre */
	padding:~~10px~~ 14px ~~8px~~; /* ↑ 2 px extra on top only */		padding:6px 14px 6px; /* ↑ 2 px extra on top only */
	width:100%; /* makes the <a> fill the button */		width:100%; /* makes the <a> fill the button */
	height:100%;		height:100%;