Fix: custom.css

docs/css/custom.css

@@ -872,7 +872,7 @@
 
 .comments {
 	margin-top: 1rem;
-	padding-top: 1.28rem;
+	padding-top: 4rem;
 	border-top: 1px solid var(--background-color1, #ddd);
 }
 
@@ -901,7 +901,7 @@
 /* ── Comment form ── */
 
 .comment-form {
-	margin-top: 2.45rem;
+	margin-top: 2.44rem;
 	margin-bottom: 1.5rem;
 }
 
@@ -939,7 +939,7 @@
 
 .comment-form__submit {
 	padding: 0.35rem 0.9rem;
-	background: var(--accent-color);
+	background: #1a73e8;
 	color: #fff;
 	border: none;
 	border-radius: 4px;
@@ -953,6 +953,12 @@
 		color 0.2s ease;
 }
 
+[data-theme='light'] .comment-form__submit {
+	background-color: var(--accent-color);
+	border: none;
+	color: #fff;
+}
+
 .comment-form__submit:hover {
 	opacity: 0.85;
 }
@@ -1331,182 +1337,6 @@
 .otp-panel__resend-btn:hover {
 	opacity: 0.8;
 }
-/* ── Comments section ─────────────────────────────────────────────────────── */
-
-.comments {
-	margin-top: 3rem;
-	padding-top: 2rem;
-	border-top: 1px solid var(--background-color1, #ddd);
-}
-
-.comments__title {
-	font-size: 1.15rem;
-	font-weight: 700;
-	margin-bottom: 1.2rem;
-}
-
-.comments__login-msg {
-	font-size: 0.9rem;
-	margin-bottom: 1.2rem;
-	color: var(--foreground-color3, #888);
-}
-
-.comments__empty {
-	font-size: 0.88rem;
-	color: var(--foreground-color3, #888);
-}
-
-.comments__error {
-	font-size: 0.88rem;
-	color: var(--error-color, #c0392b);
-}
-
-/* ── Comment form ── */
-
-.comment-form {
-	margin-bottom: 1.5rem;
-}
-
-.comment-form__input {
-	width: 100%;
-	box-sizing: border-box;
-	padding: 0.6rem 0.8rem;
-	border: 1px solid var(--background-color1, #ccc);
-	border-radius: 4px;
-	background: var(--background-color);
-	color: var(--foreground-color);
-	font: inherit;
-	font-size: 0.9rem;
-	resize: vertical;
-	outline: none;
-	transition: border-color 0.2s;
-}
-
-.comment-form__input:focus {
-	border-color: var(--accent-color);
-}
-
-.comment-form__footer {
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
-	margin-top: 0.4rem;
-}
-
-.comment-form__counter {
-	font-size: 0.75rem;
-	color: var(--foreground-color3, #999);
-}
-
-.comment-form__submit {
-	padding: 0.35rem 0.9rem;
-	background: var(--accent-color);
-	color: #fff;
-	border: none;
-	border-radius: 4px;
-	font: inherit;
-	font-size: 0.85rem;
-	cursor: pointer;
-	transition: opacity 0.15s;
-}
-
-.comment-form__submit:hover {
-	opacity: 0.85;
-}
-.comment-form__submit:disabled {
-	opacity: 0.5;
-	cursor: not-allowed;
-}
-
-.comment-form__error {
-	font-size: 0.8rem;
-	color: var(--error-color, #c0392b);
-	margin-top: 0.3rem;
-	min-height: 1rem;
-}
-
-/* ── Individual comments ── */
-
-.comment {
-	margin-bottom: 1.2rem;
-	padding: 0.75rem 0.9rem;
-	border: 1px solid var(--background-color1, #e0e0e0);
-	border-radius: 6px;
-	background: var(--background-color);
-}
-
-.comment--reply {
-	margin-top: 0.7rem;
-	margin-left: 1.5rem;
-	border-left: 3px solid var(--accent-color);
-	border-radius: 0 6px 6px 0;
-}
-
-.comment__meta {
-	display: flex;
-	align-items: center;
-	gap: 0.6rem;
-	margin-bottom: 0.4rem;
-	flex-wrap: wrap;
-}
-
-.comment__author {
-	font-weight: 600;
-	font-size: 0.88rem;
-}
-
-.comment__time {
-	font-size: 0.78rem;
-	color: var(--foreground-color3, #999);
-}
-
-.comment__actions {
-	margin-left: auto;
-	display: flex;
-	gap: 0.5rem;
-}
-
-.comment__action {
-	background: none;
-	border: none;
-	padding: 0;
-	font: inherit;
-	font-size: 0.78rem;
-	cursor: pointer;
-	color: var(--foreground-color3, #888);
-	text-decoration: underline;
-}
-
-.comment__action:hover {
-	color: var(--accent-color);
-}
-
-.comment__action--delete:hover {
-	color: var(--error-color, #c0392b);
-}
-
-.comment__body {
-	font-size: 0.9rem;
-	line-height: 1.55;
-	margin: 0;
-	white-space: pre-wrap;
-	word-break: break-word;
-}
-
-.comment__deleted {
-	font-size: 0.85rem;
-	color: var(--foreground-color3, #aaa);
-	font-style: italic;
-}
-
-.comment__reply-form {
-	margin-top: 0.7rem;
-}
-
-.comment__replies {
-	margin-top: 0.5rem;
-}
-
 /* ── Admin dropdown link ─────────────────────────────────────────────────── */
 
 .brand__auth-user-admin {

static/css/custom.css

@@ -872,7 +872,7 @@
 
 .comments {
 	margin-top: 1rem;
-	padding-top: 1.28rem;
+	padding-top: 4rem;
 	border-top: 1px solid var(--background-color1, #ddd);
 }
 
@@ -901,7 +901,7 @@
 /* ── Comment form ── */
 
 .comment-form {
-	margin-top: 2.45rem;
+	margin-top: 2.44rem;
 	margin-bottom: 1.5rem;
 }
 
@@ -939,7 +939,7 @@
 
 .comment-form__submit {
 	padding: 0.35rem 0.9rem;
-	background: var(--accent-color);
+	background: #1a73e8;
 	color: #fff;
 	border: none;
 	border-radius: 4px;
@@ -953,6 +953,12 @@
 		color 0.2s ease;
 }
 
+[data-theme='light'] .comment-form__submit {
+	background-color: var(--accent-color);
+	border: none;
+	color: #fff;
+}
+
 .comment-form__submit:hover {
 	opacity: 0.85;
 }
@@ -1331,182 +1337,6 @@
 .otp-panel__resend-btn:hover {
 	opacity: 0.8;
 }
-/* ── Comments section ─────────────────────────────────────────────────────── */
-
-.comments {
-	margin-top: 3rem;
-	padding-top: 2rem;
-	border-top: 1px solid var(--background-color1, #ddd);
-}
-
-.comments__title {
-	font-size: 1.15rem;
-	font-weight: 700;
-	margin-bottom: 1.2rem;
-}
-
-.comments__login-msg {
-	font-size: 0.9rem;
-	margin-bottom: 1.2rem;
-	color: var(--foreground-color3, #888);
-}
-
-.comments__empty {
-	font-size: 0.88rem;
-	color: var(--foreground-color3, #888);
-}
-
-.comments__error {
-	font-size: 0.88rem;
-	color: var(--error-color, #c0392b);
-}
-
-/* ── Comment form ── */
-
-.comment-form {
-	margin-bottom: 1.5rem;
-}
-
-.comment-form__input {
-	width: 100%;
-	box-sizing: border-box;
-	padding: 0.6rem 0.8rem;
-	border: 1px solid var(--background-color1, #ccc);
-	border-radius: 4px;
-	background: var(--background-color);
-	color: var(--foreground-color);
-	font: inherit;
-	font-size: 0.9rem;
-	resize: vertical;
-	outline: none;
-	transition: border-color 0.2s;
-}
-
-.comment-form__input:focus {
-	border-color: var(--accent-color);
-}
-
-.comment-form__footer {
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
-	margin-top: 0.4rem;
-}
-
-.comment-form__counter {
-	font-size: 0.75rem;
-	color: var(--foreground-color3, #999);
-}
-
-.comment-form__submit {
-	padding: 0.35rem 0.9rem;
-	background: var(--accent-color);
-	color: #fff;
-	border: none;
-	border-radius: 4px;
-	font: inherit;
-	font-size: 0.85rem;
-	cursor: pointer;
-	transition: opacity 0.15s;
-}
-
-.comment-form__submit:hover {
-	opacity: 0.85;
-}
-.comment-form__submit:disabled {
-	opacity: 0.5;
-	cursor: not-allowed;
-}
-
-.comment-form__error {
-	font-size: 0.8rem;
-	color: var(--error-color, #c0392b);
-	margin-top: 0.3rem;
-	min-height: 1rem;
-}
-
-/* ── Individual comments ── */
-
-.comment {
-	margin-bottom: 1.2rem;
-	padding: 0.75rem 0.9rem;
-	border: 1px solid var(--background-color1, #e0e0e0);
-	border-radius: 6px;
-	background: var(--background-color);
-}
-
-.comment--reply {
-	margin-top: 0.7rem;
-	margin-left: 1.5rem;
-	border-left: 3px solid var(--accent-color);
-	border-radius: 0 6px 6px 0;
-}
-
-.comment__meta {
-	display: flex;
-	align-items: center;
-	gap: 0.6rem;
-	margin-bottom: 0.4rem;
-	flex-wrap: wrap;
-}
-
-.comment__author {
-	font-weight: 600;
-	font-size: 0.88rem;
-}
-
-.comment__time {
-	font-size: 0.78rem;
-	color: var(--foreground-color3, #999);
-}
-
-.comment__actions {
-	margin-left: auto;
-	display: flex;
-	gap: 0.5rem;
-}
-
-.comment__action {
-	background: none;
-	border: none;
-	padding: 0;
-	font: inherit;
-	font-size: 0.78rem;
-	cursor: pointer;
-	color: var(--foreground-color3, #888);
-	text-decoration: underline;
-}
-
-.comment__action:hover {
-	color: var(--accent-color);
-}
-
-.comment__action--delete:hover {
-	color: var(--error-color, #c0392b);
-}
-
-.comment__body {
-	font-size: 0.9rem;
-	line-height: 1.55;
-	margin: 0;
-	white-space: pre-wrap;
-	word-break: break-word;
-}
-
-.comment__deleted {
-	font-size: 0.85rem;
-	color: var(--foreground-color3, #aaa);
-	font-style: italic;
-}
-
-.comment__reply-form {
-	margin-top: 0.7rem;
-}
-
-.comment__replies {
-	margin-top: 0.5rem;
-}
-
 /* ── Admin dropdown link ─────────────────────────────────────────────────── */
 
 .brand__auth-user-admin {